iOS flash of content on refresh

Hard bug to explain and still not sure what is going on. This only happens in iOS Safari.


This page has a composited layer (the green one) and an absolutely positioned element behind it. When the page is refreshed you'll see the red element flash before the green one renders again.

Composited layer issues

So I think it's to do with the fact that the green element is cleaned up quite quickly and the red hangs around until the document is destroyed on refresh.

But...if I change the red layer to position: fixed this issue goes away, so I'm not really sure what's going on?

Confirmed this is a bug in iOS safari where composited layers are cleaned up faster than non-composited layers.

See same test case but red element has fixed position.

Quick fix

A quick fix would be to also lift that layer to the GPU via the null transform hack by applying transform: translateZ(0) to the element that is flashing.