CODEWITHSUNDEEP
csswebkitmobile-safari
Björn Kaiser
Björn Kaiser

Reputation: 9912

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 :-)

Upvotes: 15

Views: 45037

Answers (2)

Emil Bonsaksen
Emil Bonsaksen

Reputation: 41

This probably has to do with a bug in webkit. If you have any "position: relative" or absolute your code should work just fine.

Upvotes: 4

tuddy
tuddy

Reputation: 1834

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!

Upvotes: 32

Related Questions