Search code examples
csswebkitmobile-safari

Using '-webkit-overflow-scrolling: touch' hides content while scrolling/dragging

as the title says I'm having the problem with content getting hidden while scrolling/dragging the content when using the CSS property -webkit-overflow-scrolling: touch.

For a basic understanding, here is my markup

<div class="page">
   <div class="section_title">Title</div>
   <div class="items">
      <div class="item">...Text and Image...</div>
      <div class="item">...Text and Image...</div>
      <div class="item">...Text and Image...</div>
   </div>
   <div class="section_title">Title</div>
   <div class="items">
      <div class="item">...Text and Image...</div>
      <div class="item">...Text and Image...</div>
      <div class="item">...Text and Image...</div>
   </div>
</div>

And the CSS:

.page {
    width: 320px;
    height: 366px;
    overflow: scroll;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
}

The code itself works good, I can scroll through the content but everything that is inside of a items div get's hidden while I'm scrolling/dragging. Anyone came across this issue and solved it or is it just standard behavior of Mobile Safari to save memory and there is nothing we can do about it?

Any help is appreciated :-)

Solution

  • Have you tried putting the elements into memory?

    If not, try putting .items in memory using the css -webkit-transform: translate3d(0,0,0);

    You may want to go higher or lower in the nesting depending on performance, ie applying the translate to .page or .item. This will increase the memory used which can get crashy but it helps the browser redraw everything.

    Anyways, hope that helps!