Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

CSS performance relative to translateZ(0)

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); } 
like image 996
Ahmed Nuaman Avatar asked May 30 '12 10:05

Ahmed Nuaman


1 Answers

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.

like image 193
Dan Eden Avatar answered Sep 29 '22 14:09

Dan Eden