CSS performance relative to translateZ 0

Question

A number of blogs have expressed the performance gain in  tricking  the GPU to think that an element is 3D by using transform  translateZ 0  to speed up animations and transitions  I was wondering if there are implications to using this transform in the following manner           -webkit-transform  translateZ 0       -moz-transform  translateZ 0       -ms-transform  translateZ 0       -o-transform  translateZ 0       transform  translateZ 0

User · Answer

If you want implications  in some scenarios Google Chrome performance is horrible with hardware acceleration enabled  Oddly enough  changing the  trick  to -webkit-transform  rotateZ 360deg   worked just fine   I don t believe we ever figured out why

User · Answer

I can attest to the fact that -webkit-transform  translate3d 0  0  0   will mess with the new position  -webkit-sticky  property  With a left drawer navigation pattern that I was working on  the hardware acceleration I wanted with the transform property was messing with the fixed positioning of my top nav bar  I turned off the transform and the positioning worked fine    Luckily  I seem to have had hardware acceleration on already  because I had -webkit-font-smoothing  antialiased on the html element  I was testing this behavior in iOS7 and Android

User · Answer

It forces the browser to use hardware acceleration to access the device   s graphical processing unit  GPU  to make pixels fly  Web applications  on the other hand  run in the context of the browser  which lets the software do most  if not all  of the rendering  resulting in less horsepower for transitions  But the Web has been catching up  and most browser vendors now provide graphical hardware acceleration by means of particular CSS rules   Using -webkit-transform  translate3d 0 0 0   will kick the GPU into action for the CSS transitions  making them smoother  higher FPS    Note  translate3d 0 0 0  does nothing in terms of what you see  It moves the object by 0px in x y and z axis  It s only a technique to force the hardware acceleration   Good read here  http   www smashingmagazine com 2012 06 21 play-with-hardware-accelerated-css

User · Answer

On mobile devices sending everything to the GPU will cause a memory overload and crash the application  I encountered this on an iPad app in Cordova  Best to only send the required items to the GPU  the divs that you re specifically moving around    Better yet  use the 3d transitions transforms to do the animations like translateX 50px  as opposed to left 50px

User · Answer

CSS transformations create a new stacking context and containing block  as described in the spec  In plain English  this means that fixed position elements with a transformation applied to them will act more like absolutely positioned elements  and z-index values are likely to get screwed with   If you take a look at this demo  you ll see what I mean  The second div has a transformation applied to it  meaning that it creates a new stacking context  and the pseudo elements are stacked on top rather than below   So basically  don t do that  Apply a 3D transformation only when you need the optimization  -webkit-font-smoothing  antialiased  is another way to tap into 3D acceleration without creating these problems  but it only works in Safari

[performance] CSS performance relative to translateZ(0)

Examples related to performance

Examples related to css

Examples related to translate-animation