iOS5 Images disappear when scrolling with webkit-overflow-scrolling: touch

Question

I had previously been using iScroll plugin but wanted to drop it for the native behaviour.

The initial implementation was using

webkit-overflow-scrolling: auto;

however I updated this to ...

webkit-overflow-scrolling: touch

.. to enable the motion/inertia on the touch scroll.

The issue with this is the list items contained within the navigation disappear completely when scrolling, and only return once the momentum has come to a rest.

An example of this can be seen here

Answer 1

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

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

Answer 2

We tracked this down to elements that had position:relative or position:absolute. After we removed them the items would display while scrolling.

Answer 3

Like Mark Napthine said, adding the following css definition:

-webkit-transform: translateZ(0);

should indeed force rendering. The trick is to put it on every unrendered element inside your overflowing container. In my case it's an unordered list of images contained in a div with the def

-webkit-overflow-scrolling: touch;

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

Answer 4

This is a bug that I've run across too - this question seems to relate to the same issue: CSS3 property webkit-overflow-scrolling:touch ERROR

There user1012566 suggested it has to do with the position property of the elements inside the scroll (static works, nothing else does), though I had mixed results with this.

Another user said they've reported it on the bugreport.apple.com site, but reported bugs aren't public there, so it's impossible for the rest of us to see the official response, if any, or track progress.

Answer 5

This bug seems even worse with iFrames. I created a JSFIDDLE to demonstrate it (open http://jsfiddle.net/KMayN/9/ with an iOS 5.0.1 device) and I sent a bug report to Apple. Very curious: if you scroll, you'll see a blank (not rendered) content...but if you then zoom, the content appears! And so on... I will keep you up-to-date if they reply to me. I tried everything (scrollable iFrame with/without div container, container with/without scrolling, etc...), there are simply no way: we have to wait Apple for a bugfix.

Answer 6

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