-webkit-transform:translatez (0);-webkit-transform:translate3d (0,0,0); Function: 1, switch to the hardware synthesis mode, usually all things are CPU complete, hardware image synthesis mode will assign the specified element to GPU processing 2, create a new layer, with its own backing surface (a graphics context into which Layers is drawn), usually not all new layers have their own backing surface, and in most cases they share one.The following properties in CSS (CSS3 transitions, CSS3 3D transforms, Opacity, Canvas, WebGL, Video) to trigger GPU rendering, please use it properlyIn the chrome environment, decide if you should have your own backing surface condition: The layer has 3D or perspective transform CSS properties. The layer is used by <video> element using accelerated video decoding. The layer is used by a <canvas> element with a 3D context or accelerated 2D context. The layer is used for a composited plugin, e.g. Flash or silverlight.the layer uses a CSS animation for it opacity or use s an animated WebKit transform. The layer uses accelerated CSS filters. The layer has a descendant a compositing layer. The layer has a sibling with a lower z-index which have a compositing layer (in other words the layer is rendered on top of a composited layer). But on mobile devices, unrestricted use of this hack can become a mess, because their video memory (the visual Random Access memory) is very limited, so it is easy to run out of the rendering effect is not good. Backing surface is essentially a structure that needs to be uploaded to the GPU and synthesized by its image. Each individual structure in the process of image synthesis needs to be uploaded to the GPU and then drawn in sequence.
Simultaneous use:
backface-visibility: hidden; perspective:1000;
When the working with 3d transform. Even "fake" 3D transforms. Experience tells me, these, lines always improve performances, especially on IPad and also on Chrome.
Null transform hack forcing hardware acceleration
