Composited layers in iOS Safari bug

So had an interesting bug the other day where upon refresh, navigating to another page or external site within the same tab on iOS safari would cause some of my content to flash before the page was loaded. What’s interesting is the main layer over the top was a composited layer and the one beneath was not.

Composited layers?

If you’re not familiar with composited layers basically they’re elements in your page that have been lifted to be rendered by the GPU for speed. This happens when you apply CSS transforms and opacity to the element or to keep an element lifted you can use a 3d transform like translateZ(0) or translate3d(0,0,0). Have a read of this article or check out these slides if you want to know more about layers.

The issue

So the issue is that composited layers upon document unload are destroyed much faster than elements that are not and what you get is a flash of the content as the page is unloaded. Check out the test case or see the gif animation below.

composited-layers-flash

This has been confirmed by a WebKit engineer to be a bug.

The fix

There are two fixes I came across. The first is to make the non composited layer a composited layer via translateZ(0) and now there won’t be a flash.

The second is to change, in my demos case, position: absolute to position: fixed. This I believe is also lifted to the GPU but I’m not 100% sure of that. Fixed position is lifted to a composited layer in both Blink and WebKit hence why setting that also fixes the flash. Thanks @divya.

Hopefully this will save you some head scratching if you ever come across it.