CSS performance relative to translateZ (0)

Question

Several blogs have expressed performance gains when the GPU was "tricked" into thinking that a 3D element was using transform: translateZ(0) to speed up animations and transitions. I was wondering what consequences the consequences of applying this transformation might have as follows:

 * { -webkit-transform: translateZ(0); -moz-transform: translateZ(0); -ms-transform: translateZ(0); -o-transform: translateZ(0); transform: translateZ(0); } 

Answer 1

CSS transformations create a new stacking context and contain a block, as described in the specification. In plain English, this means that fixed-position elements with the transformation applied to them will act more like absolutely positioned elements, and z-index values ​​are likely to be screwed with.

If you watch this demo , you will see what I mean. The second div has a conversion applied to it, which means that it creates a new stacking context, and the pseudo-elements are located on top, not lower.

So basically, do not do this. Apply 3D transformation only when you need optimization. -webkit-font-smoothing: antialiased; is another way to use 3D acceleration without creating these problems, but it only works in Safari.

Answer 2

If you need consequences, in some scenarios the performance of Google Chrome is terrible with hardware acceleration enabled . Oddly enough, changing the "trick" to -webkit-transform: rotateZ(360deg); worked fine.

I do not believe that we have ever figured out why.

Answer 3

This forces the browser to use hardware acceleration to access the graphics processing unit (GPU) to make the pixels fly. Web applications, on the other hand, run in a browser context, which allows the software to perform most (if not all) of the rendering, which leads to less power for transitions. But the Internet is catching up, and most browser vendors now provide graphical hardware acceleration using certain CSS rules.

Using -webkit-transform: translate3d (0,0,0); will trigger the GPU for CSS transitions, making them smoother (higher FPS).

Note: translate3d (0,0,0) does nothing in terms of what you see. it moves the object 0px along the x, y, and z axes. This is just a way to force hardware acceleration.

Read well here: http://www.smashingmagazine.com/2012/06/21/play-with-hardware-accelerated-css/

Answer 4

I can confirm that -webkit-transform: translate3d(0, 0, 0); will work with the new property position: -webkit-sticky; . When using the navigation template on the left box I was working on, the hardware acceleration I wanted with the transform property was useless with the fixed positioning of my top navigation bar. I turned off the transformation and the positioning worked fine.

Fortunately, I seemed to already have hardware acceleration because I had the -webkit-font-smoothing: antialiased html element. I tested this behavior on iOS7 and Android.

Answer 5

On mobile devices sending everything to the GPU, memory overload and application crashes will occur. I came across this in an iPad application in Cordoba. It’s best to send the necessary items to the GPU, those divs that you specifically move.

Better yet, use 3d transitions to make animations like translateX (50px) rather than left: 50px;