About CSS3 enabling hardware acceleration usage and pitfalls

This article mainly introduces the detailed CSS3 to open the use of hardware acceleration and pits, the content is very good, and now share to everyone, but also for everyone to do a reference.

Recently looking at Iscroll's documentation on GitHub. Although it is in English, but in order to install force, can not bite the bullet, I think the author is well written (I have so good patience to write so long documents [cover face]), and then in order to better install force, have looked again, which is found a lot of good things, for example, CCS3 hardware acceleration is in the above by me. For everyone to play happily together, I will first attach Iscroll's GitHub link:https://github.com/issaxite/iscroll

Turn on CSS3 acceleration

The CSS3 animations we write (without triggering hardware acceleration) are performed using the browser's slow software rendering engine, which literally means no hardware acceleration is turned on. For example, sometimes the animation of the mobile Web page (such as the simplest modal frame) will appear on the Android phone card frame phenomenon, there is a great possibility is to use the browser software rendering engine to execute, performance can not keep up with the result. The above mentioned hardware acceleration can solve this problem, performance can't keep up, then Spider Man on (the greater the power, the greater the responsibility)-to hardware acceleration, performance up (I know this is a rotten gag), in fact, the so-called hardware acceleration is to tell the browser, let it use the GPU to render, Switch to GPU mode and play a series of functions on the GPU.

As an example:

CSS animations, transforms, and transitions do not automatically turn on GPU acceleration, but are executed by the browser's slow software rendering engine. For performance, you may need to turn on hardware acceleration at this time. So how can we switch to GPU mode, and many browsers provide some of the triggering CSS rules.

Chrome, FireFox, Safari, ie9+, and the latest versions of opera all support hardware acceleration, and when they detect a DOM element in a page that has some CSS rules applied, it turns on the most salient feature of the 3D transformation of the element.

Several 3d properties that can be switched to GPU mode are seen in other articles:

. isaax{   -webkit-transform:translate3d (250px,250px,250px)   Rotate3d (250px,250px,250px,-120deg)   Scale3d (0.5, 0.5, 0.5);}

The following is what you see in the Iscroll documentation:

. Isaax {   -webkit-transform:translatez (0);   -moz-transform:translatez (0);   -ms-transform:translatez (0);   -o-transform:translatez (0);   Transform:translatez (0);}

It is said that the use of the above style to trigger hardware acceleration will appear "page may flicker effect" problem, I have not found that on the Internet is found two can be solved:

Method One

. isaax {   -webkit-backface-visibility:hidden;   -moz-backface-visibility:hidden;   -ms-backface-visibility:hidden;   Backface-visibility:hidden;    -webkit-perspective:1000;   -moz-perspective:1000;   -ms-perspective:1000;   perspective:1000;}

• Backface-visibility (ie10+) is used to hide the back of the rotated element, Translatez caused by?;

• When you define a perspective property for an element, its child elements get a perspective effect.

In other words, it is not to remove flicker, but to set it to transparent [technology too slag to dare to speak]

Method Two

In the case of the WebKit kernel, there is also a way to resolve:

. Isaax {   -webkit-transform:translate3d (0, 0, 0);   -moz-transform:translate3d (0, 0, 0);   -ms-transform:translate3d (0, 0, 0);   Transform:translate3d (0, 0, 0);}

Hardware-accelerated pits

Read the Great God's article only to know, hold the grass, this thing is not the Tiger Balm Ah, use is not good, ruthless up you that female ticket also ruthless, see open big God's example again feel deep malicious. The presence of the Carousel animation element in the head actually results in all the relative and absolutely positioned elements being placed in the composite layer ...

And then say how to open the view "composite layer" element option as if the method mentioned above is somewhat outdated:

Open the console

Tick the layer borders option and you'll find the world suddenly clear a lot

Finally, attach the method of skipping the pit :

When using 3D hardware acceleration to improve animation performance, it is better to add a Z-index attribute to the element, the sorting of the artificial interference compound layer, can effectively reduce chrome to create unnecessary composite layer, improve rendering performance, mobile optimization effect is particularly obvious.

. isaax{  position:relative;  z-index:1;  You can set a large point and try to set it higher than the Z-index value of the subsequent element}

The above is the whole content of this article, I hope that everyone's learning has helped, more relevant content please pay attention to topic.alibabacloud.com!