When we use CSS animation, maybe the rendering speed will be slow. In order to solve this problem, we can choose the hardware acceleration to help us. But that's the key, sometimes it will appear some bugs in Chrome, in my opinion, it's because the wrong compositing layer rendering which we can solve using hack.
So in this blog, let's talk about the CSS hardware Acceleration.
1. Start hardware Acceleration
We can use two methods below, when we use the hardware acceleration, the fps will be double increased.
webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);
Or
webkit-transform: translate3d(0,0,0);
-moz-transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
-o-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
2. First Bug!
Q :
When we use the hardware acceleration for lots of "div" which set "position:absolute", some "div" will disappear automatically.
Why?
Nobody knows, maybe because of the Chrome itself.
How to solve?
(1) Please do better not use "position:absolute/fixed" for those elements.
(2) Or you can decrease the number of animation blocks.
3. Second Bug!
Q :
Browser flicker or jitter
Why?
Browsers will start 3d animation effect, even though you use translateZ(0).
How to solve?
Set: -webkit-backface-visibility:hidden;
-webkit-perspective:1000;
4. Third Bug!
Q :
If we use the carousel figure or loading animation for a certain "div", some other blocks will also be added to compositing layers even they are not set 3d hardware acceleration. This bug will cause a very slow rendering event in mobile devices.
Why?
The Chrome will create compositing layer for each "div" when it has at least one following case:
(1) 3d animation or perspective transform
(2) Using accelerated video decoding
(3) WebGL or Canvas
(4) Flash
(5) Changing opacity
(6) Child element whose parent has above situation
(7) Element has a sibling with a lower z-index which has a compositing layer (in other words the it’s rendered on top of a composited layer)
What's the key? The last one!
How to solve?
Obviously, we should set "z-index:1;" for the element which used 3d hardware acceleration.
5. When do we need hardware acceleration?
(1) Use many large pictures to do the animation (especially PNG24).
(2) Use "background-size:cover" for background picture.
(For more details)
(3) Lots of CSS3 DOM animation
(That's all)