CSS performance relative to translateZ(0)
css, performance, translate-animation
Solution
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.
Problem
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); } ```