iPad Safari scrolling causes HTML elements to disappear and reappear with a delay
I'm currently developing a web app 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, what I'm seeing is that 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 any way in which I can prevent this choppy-ness from happening. Additionally, I would also appreciate if anyone can shed light on what the iPad Safari is actually trying to do.
Answer
You need to trick the browser to use hardware acceleration more effectively. You can do this with an empty 3d 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).
Not a guaranteed fix, but fairly successful most of the time.