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-scr         


        

Answer 1

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...