IOS5 images disappear when scrolling using webkit-overflow: touch scroll

Question

I previously used the iScroll plugin, but wanted to drop it for my own behavior.

The initial implementation was to use

webkit-overflow-scrolling: auto; 

however, I updated this to ...

 webkit-overflow-scrolling: touch 

.. to turn on motion / inertia in touch.

The problem with this is that the list items contained in the navigation completely disappear when scrolling and return only after the impulse has stopped.

An example of this is here.

Answer 1

I had the same problem in the past, if you need to use positioned elements, try adding -webkit-transform: translateZ(0); to items or container. This property often forces the browser to use hardware acceleration, and with additional power, your images will most likely not disappear. Anyway, this worked for me.

More useful stuff here: http://www.html5rocks.com/en/tutorials/speed/html5/

Answer 2

We tracked this down to elements that had a position: relative or position: absolute. After we delete them, the items will be displayed when scrolling.

Answer 3

As Marc Naptin said, adding the following css definition:

 -webkit-transform: translateZ(0); 

should really force rendering. The trick is to place it on every unloaded item inside your overflowing container. In my case, this is an unordered list of images contained in a div with def

 -webkit-overflow-scrolling: touch; 

I put the definition of "transform" above on the li tags, wrapping the images, and it solved the problem instantly. Hope this helps ...

Answer 4

This is the error I encountered - this question seems to refer to the same problem: CSS3 property webkit-overflow-scroll: click ERROR

There user1012566 suggested that it relates to the position property of elements inside the scroll (static works, does nothing), although I had mixed results with this.

Another user said that they reported this on bugreport.apple.com, but they did not publish error messages there, so the rest of us will not be able to see the official answer, if any, or track the progress.

Answer 5

This error looks worse with iFrames. I created JSFIDDLE to demonstrate it (open http://jsfiddle.net/KMayN/9/ with an iOS 5.0.1 device) and I sent the bug report to Apple. Very curious: if you scroll through the list, you will see empty (not displayed) content ... but if you then zoom in, the content will appear! And so on ... I will keep you posted if they answer me. I tried everything (scrollable iFrame with / without container div, container with / without scroll, etc.), There is simply no way: we have to wait for Apple to fix it.

Answer 6

 -webkit-transform: translate3d(0, 0, 0);