Are there any reasons not to hardware-accelerate everything with
transform: translate3d(0,0,0); Using the * as the selector?
What things should be hardware accelerated and what things not?
Add a comment |
1 Answer
@IMUXIxD You ask a really good question and the answer is no you shouldn't hardware accelerate everything it may seem to solve an issue but can actually be causing several other issues. It can also cause weird display issues when you're trying to z-index items as hardware accelerating object tends to remove them from the DOM while animating.
I wrote an extensive article on my understandings and tests with hardware acceleration here http://blog.zindustriesonline.com/gpu-accelerated-animations-and-composite-layering/ it also has a very good video on the subject from Matt Seeley an engineer at Netflix.
I hope this helps you understand a little better the benefits and downfalls of using hardware acceleration and what the best case scenarios are for use cases.
3 Comments
IMUXIxD
So only use the
transform: translate3d(0, 0, 0); on elements I will animate? What about elements I'm just fading or sliding?
Zanderi
Fading shouldn't require any 3d acceleration at all, as far as sliding goes you will have to toy around with which properties work best for you. Once you specify translate3d the engine assumes you know exactly how you want to handle it and throws it into your lap, if you simply use translateX or translateY the browser is smart enough that it will still manage a lot of the animation and redraws.
Zanderi
The problem comes in the composite layering the more you force the browser to repaint the worse the performance becomes. Ideally you want the least amount of redraws that's what all those numbers are about on my blog. In order to accomplish this you may want to use a different property I.E. you may want to animate margin instead of translateX. When you start toying with these properties you will notice the biggest changes on mobile and tablet devices. Sometimes you will have to ignore these rules to make the animation function in webkit browser; most notably android browsers not chrome/safar