Most people now know that modern web browsers use the GPU to render parts of web pages, especially ones with animation. For example, a CSS animation using the
transform property looks much smoother than one using the
top properties. But if you ask, “How do I get smooth animation from the GPU?” in most cases, you’ll hear something like, “Use
transform: translateZ(0) or
These properties have become something like how we used
zoom: 1 for Internet Explorer 6 (if you catch my drift) in terms of preparing animation for the GPU — or compositing, as browser vendors like to call it. But sometimes animation that is nice and smooth in a simple demo runs very slowly on a real website, introduces visual artifacts or even crashes the browser. Why does this happen? How do we fix it? Let’s try to understand.