相对于 translateZ(0) 的 CSS 性能 [英] CSS performance relative to translateZ(0)

问题描述

许多博客都表达了通过使用 transform: translateZ(0) 来加速动画和过渡，从而欺骗"GPU 认为元素是 3D 的性能提升.我想知道以下列方式使用此转换是否有影响:

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);
}

推荐答案

CSS 转换创建新的堆叠上下文和包含块，如 规范. 简单来说，这意味着应用了变换的固定位置元素将更像绝对定位元素，而 z-index价值观很可能会被搞砸.

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.

如果您看看这个演示，您就会明白我的意思.第二个 div 应用了一个转换，这意味着它创建了一个新的堆叠上下文，并且伪元素堆叠在顶部而不是底部.

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.

所以基本上，不要那样做.仅在需要优化时应用 3D 转换.-webkit-font-smoothing: antialiased; 是另一种利用 3D 加速而不产生这些问题的方法，但它仅适用于 Safari.

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.

这篇关于相对于 translateZ(0) 的 CSS 性能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！