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

Question

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

I was using translate3d before. It produced unwanted results. Basically, it would chop off and not render elements that were offscreen, until I interacted with them. So, basically, in landscape orientation, half of my site that was offscreen was not being shown. This is a iPad web application, owing to which I was in a fix.

Applying translate3d to relatively positioned elements solved the problem for those elements, but other elements stopped rendering, once offscreen. The elements that I couldn't interact with (artwork) would never render again, unless I reloaded the page.

The complete solution:

*:not(html) {
    -webkit-transform: translate3d(0, 0, 0);
}

Now, although this might not be the most "efficient" solution, it was the only one that works. Mobile Safari does not render the elements that are offscreen, or sometimes renders erratically, when using -webkit-overflow-scrolling: touch. Unless a translate3d is applied to all other elements that might go offscreen owing to that scroll, those elements will be chopped off after scrolling.

_{(This is the complete answer to my question. I had originally marked Colin Williams' answer as the correct answer, as it helped me get to the complete solution. A community member, @Slipp D. Thompson edited my question, after about 2.5 years of me having asked it, and told me I was abusing SO's Q & A format. He also told me to separately post this as the answer. @Colin Williams, thank you! The answer and the article you linked out to gave me a lead to try something with CSS. So, thanks again, and hope this helps some other lost soul. This surely helped me big time!)}

Targeting all elements but html: *:not(html) caused problems on other elements in my case. It modified the stacking context, causing some z-index to break.

We should better try to target the right element and apply -webkit-transform: translate3d(0,0,0) to it only.

Sometimes the translate3D(0,0,0) doesn't work. We can use the following method, targeting the right element:

@keyframes redraw{
    0% {opacity: 1;}
    100% {opacity: .99;}
}

/* iOS redraw fix */
animation: redraw 1s linear infinite;

When the translate3d doesn't work, try to add perspective. It always works for me

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

Increase Your Site’s Performance with Hardware-Accelerated CSS