CSS性能相对于translateZ（0）

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。

Answer 2

如果您需要影响， 在某些情况下，启用硬件加速后，Google Chrome的性能会非常糟糕 。 奇怪的是，将“技巧”改为-webkit-transform: rotateZ(360deg); 工作得很好。

我不相信我们曾经弄明白为什么。

Answer 3

它强制浏览器使用硬件加速来访问设备的图形处理单元（GPU）以使像素飞行。 另一方面，Web应用程序在浏览器的上下文中运行，这使得软件可以完成大部分（如果不是全部）渲染，从而减少了转换的马力。 但是Web一直在追赶，大多数浏览器厂商现在通过特定的CSS规则提供图形硬件加速。

使用-webkit-transform: translate3d(0,0,0); 将GPU转换为CSS过渡的动作，使它们更平滑（更高的FPS）。

注意： translate3d(0,0,0)在您看到的内容方面没有任何作用。 它在x，y和z轴上将对象移动0px。 这只是一种强制硬件加速的技术。

好在这里阅读： http ： //www.smashingmagazine.com/2012/06/21/play-with-hardware-accelerated-css/

Answer 4

我可以证明-webkit-transform: translate3d(0, 0, 0); 会搞乱新position: -webkit-sticky; 属性。 使用我正在处理的左抽屉导航模式，我想要的转换属性的硬件加速是弄乱我的顶部导航栏的固定位置。 我关闭了变换，定位工作正常。

幸运的是，我似乎已经有了硬件加速，因为我有-webkit-font-smoothing: antialiased对html元素进行-webkit-font-smoothing: antialiased处理。 我在iOS7和Android中测试了这种行为。

Answer 5

在移动设备上将所有内容发送到GPU将导致内存过载并导致应用程序崩溃。 我在Cordova的iPad应用程序上遇到过这个问题。 最好只将所需的项目发送到GPU，即您专门移动的div。

更好的是，使用3d 过渡 变换来完成动画，如translateX（50px）而不是左：50px;