相对于translateZ（0）的CSS性能

Question

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

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

Answer 1

CSS转换会创建一个新的堆栈上下文并包含该块，如规范中所述。用简单的英语来说，这意味着对固定位置的元素应用了转换后，它们的行为将更像是绝对定位的元素，并且z-index值很可能会被拧紧。

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

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