You won’t find anything (at least for now) in the W3C’s specifications about how compositing works, about how to explicitly put an element on a compositing layer or even about compositing itself. The most important thing I’d like to tell you before we dive deep into GPU compositing is this: It’s a giant hack. Why does this happen? How do we fix it? Let’s try to understand.
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.īut sometimes animation that is nice and smooth in a simple demo runs very slowly on a real website, introduces visual artefacts or even crashes the browser. 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 will-change: transform.” For example, a CSS animation using the transform property looks much smoother than one using the left and top properties. Most people now know that modern web browsers use the GPU to render parts of web pages, especially ones with animation. This article aims to help you to better understand how the browser uses the GPU to render, so that you can create impressive websites that run quickly on all devices.
0 kommentar(er)
