Accidental layer creation

Click the box above, it spins, woo! Click somewhere else, it stops, boo!

Take a close look at this text when you start and stop the box spinning, it changes ever so slightly, you may have to zoom in to see it. It's losing subpixel antialiasing. This is a symptom of text getting its own texture layer on the GPU.

Fire up this page in Chrome Canary, and turn on "Show composited layer borders" in devtools settings. You'll see the text getting an orange border when the box is spinning, confirming its getting its own texture-backed layer.

Aside from the minor text rendering change, this isn't a big deal on desktop, creating textures and uploading to the GPU is pretty cheap. However, mobile devices often don't have such a friendly relationship with the GPU, and texture creation isn't as cheap.

Why is this happening?

The box has position: relative, but so do the headings and paragraphs. This means the headings and paragraphs are layered above the box. When the box get its own texture-backed layer, by starting a transform-based animation, anything that could appear on top of it must also get a texture-backed layer, as layers without one cannot be rendered on top.

How do I fix it?

Simple! Just make sure elements that are likely to get a texture-backed layer appear on top of ones that won't. In this case, pop into devtools and give the box z-index: 1. Now the font rendering remains the same whether the box is animating or not, and the text doesn't need its own layer on the GPU.

I want to know more!

I'm giving a talk on aspects of browser rendering like this, pop along to one of them!