css - iPad Safari scrolling causes HTML elements to disappear and reappear with a delay

Question

I'm currently developing a web application using HTML5 and jQuery for iPad Safari. I'm running into a problem wherein large scroll areas cause the elements that are offscreen to appear after a delay when I scroll down to them.

What I mean by that is, if I have a row of images (or even a div with a gradient) that is offscreen, when I scroll down (or up) to it, the expected behavior is for the element to appear on screen as I am scrolling to it.

However, the element does not appear until I lift my finger off the screen and the scroller finishes all its animations.

This is causing a super noticeable problem for me, making the whole thing look choppy, although it is not. I'm guessing the iPad Safari is trying to do something to save memory. Is there a way in which I can prevent this choppy-ness from happening?

Additionally, what is iPad Safari actually trying to do?

Answer 1

You need to trick the browser to use hardware acceleration more effectively. You can do this with an empty three-dimensional transform:

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

Particularly, you'll need this on child elements that have a position:relative; declaration (or, just go all out and do it to all child elements).

It is aot a guaranteed fix, but it is fairly successful most of the time.

Hat tip: iOS 5 Native Scrolling–Grins & Gotchas