performance - 相对于translateZ(0)的CSS性能

许多博客都表示，通过使用transform: translateZ(0)加速动画和过渡，“诱使” GPU认为元素是3D可以提高性能。我想知道以下列方式使用此转换是否有影响:

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

最佳答案

CSS转换会创建一个新的堆栈上下文并包含块，如the spec.中所述。用简单的英语来说，这意味着在其上应用了转换的固定位置元素将更像是绝对定位的元素，并且z-index值很可能被搞砸了。

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

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

关于performance - 相对于translateZ(0)的CSS性能，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/10814178/