In this case, for every animation frame, the browser has to recalculate the element’s geometry (i.e. We’ve decided to animate the A element by moving it with the left property and CSS animation: The browser will paint it from the CPU, then send the resulting image to the GPU, which will display it on screen.
Let’s say we have a page with A and B elements, each with position: absolute and a different z-index applied to it. To prepare a page for GPU animation, we have to understand how things work in the browser, not just follow some random advice from the Internet or from this article. Some things might be just plain wrong, and some things could change over time - you have been warned! It’s just an optimization that the browser applies to perform certain tasks and that each browser vendor implements in its own way.Įverything you’ll learn in this article is not an official explanation of how things works, but rather a result of my own experimentation, accompanied by a little common sense and knowledge of how different browser subsystems work. 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. 001dpcm) įirefox Only CSS Hack /* FireFox 3 and Up */ * IE9 Media Query, works well with background, doesn't affect IE10 and later all and (min-width:0\0) and (min-resolution. * IE9 CSS - doesn't work with background */ But we have this CSS code to dominate: /* for IE6 */
So the main problem is Internet Explorer.
But I stopped to care about IE6 already 🙂 No more! It’s often getting down to solve problems with Internet Explorer, especially version 6 and 7. CSS hacks are needed in order to solve problems caused by different browsers rendering.
0 kommentar(er)
