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

Force GPU acceleration

Producing GPU-accelerated content is an excellent strategy for maintaining smooth animations and interactions within any web application. By employing transform: translate3d(0,0,0) (or the simpler transform: translateZ(0)), you're forcing the browser to handle the physical layer computations on the GPU, which is particularly well-suited for such tasks.

.element {
  transform: translateZ(0); /* a.k.a "Summon the GPU" */
}


Manage your performance

Deploying the transform trick indiscriminately can lead to performance degradation and create z-index problems, it's like eating too much candy — seems great at first, but the aftermath isn't pretty. Be selective in your application of these properties, applying them only where they'll offer the most benefit.

Apply targeted animations

Rather than broadly applying transforms, consider using animation properties and @keyframes to prompt iOS to redraw as needed. You'll get most of the benefits of the transform trick, without impacting the entire page.

@keyframes targeted-redraw {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(0, 0, 0); }
}
.element {
  animation: targeted-redraw 1s infinite;
}


Address delayed rendering

Some magic tricks backfire. -webkit-overflow-scrolling: touch provides smooth scrolling, but may cause Safari to stop rendering offscreen elements. Mitigate it with strategic use of CSS containment and GPU acceleration.

.element {
  contain: paint;
  transform: translateZ(0); /* the old one-two punch */
}


Curb the transform enthusiasm

Overuse of the translate3d fix creates the equivalent of a crowded theater exit: chaos, and z-index problems. Instead, apply the transform where it's most needed. Remember, moderation in all things

Consult the oracle

For an in-depth dive into these techniques, visit the given references in the list provided. Notably, reference link #4 discusses methods to increase performance using hardware-accelerated CSS.