什么-webkit转换:translate3d(0,0,0);到底是怎么做的?应用于body

Question

-webkit-transform: translate3d(0,0,0);究竟做什么？它有性能问题吗？我应该将其应用于身体还是单个元素？它似乎大大改进了滚动事件。

谢谢你的课！

Answer 1

-webkit-transform: translate3d(0,0,0);使一些设备运行硬件加速。

在这里可以找到一个好的阅读

本机应用程序可以访问设备的图形处理单元（GPU）使像素飞行。另一方面，Web应用程序运行在浏览器的上下文，该上下文允许软件执行大部分操作（如果不是all），从而减少了转换的马力。但网络已经迎头赶上，大多数浏览器供应商现在都提供通过特定CSS规则的图形硬件加速。

使用-webkit-transform: translate3d(0,0,0);将启动GPU进行CSS转换，使其更平滑（FPS更高）。

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

---

一种替代方案是-webkit-transform: translateZ(0)。如果Chrome和Safari由于转换而出现闪烁，请尝试-webkit-backface-visibility: hidden和-webkit-perspective: 1000。有关更多信息，请参阅本文。

Answer 2

我在这里没有看到解释这一点的答案。通过使用一组复杂的验证来计算每个div及其选项，可以完成许多转换。但是，如果您使用3D函数，您拥有的每个2D元素都被视为3D元素，我们可以对这些元素执行矩阵变换。然而，大多数元素在"技术上"已经被硬件加速了，因为它们都使用GPU。但是，3D变换直接作用于这些2D渲染中的每一个的缓存版本（或div的缓存版本），并直接在它们上使用矩阵变换（其是矢量化和并行化的FP数学）。

需要注意的是，3D转换仅对缓存的2Ddiv上的特性进行更改（换句话说，div已经是渲染图像）。因此，像改变边框宽度和颜色这样的事情不再是模糊地说的"3D"。如果您仔细考虑，更改边界宽度需要重新绘制div，因为并重新对其进行缓存，以便可以应用3D变换。

希望这有道理，如果你还有任何问题，请告诉我。

为了回答您的问题，translate3d: 0x 0y 0z不会做任何事情，因为变换直接作用于通过将div的顶点运行到GPU着色器中而形成的纹理。该着色器资源现在已缓存，并且在绘制到帧缓冲区时将应用矩阵。所以，这样做基本上没有任何好处。

这就是浏览器内部的工作方式。

步骤1：分析输入

<div style = "position:absolute;left:0;right:0;bottom:0;top:0;"></div>

步骤2：开发复合层

CompositeLayer compLayer = new CompositeLayer();
compLayer.setPosition(0, 0, 0, 0);
compLayer.setPositioning(ABSOLUTE); // Note. this is psuedocode. The actual code
Pipeline.add(compLayer, zIndex); // would be significantly more complex.

步骤3：渲染复合层

for (CompositeLayer compLayer : allCompositeLayers){
     // Create and set cacheTexture as active target
     Texture2D cacheTexture = new Texture2D();
     cacheTexture.setActive();
     // Draw to cachedTexture
     Pipeline.renderVertices(compLayer.getVertices());
     Pipeline.setTexture(compLayer.getBackground());
     Pipeline.drawIndexed(compLayer.getVertexCount());
     // Set the framebuffer as active target
     frameBuffer.setActive();
     // Render to framebuffer from texture and **applying transformMatrix**
     Pipeline.renderFromCache(cacheTexture, transformMatrix);
}

Answer 3

MobileSafary（iOS 5）中存在滚动错误，导致在滚动容器中显示为输入元素副本的工件。

对每个子元素使用translate3d可以修复这个奇怪的错误。这是一个CSS的例子，它为我节省了一天

.scrolling-container {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}
.scrolling-container .child-element {
    position: relative;
    -webkit-transform: translate3d(0,0,0);
}

Answer 4

Translate3D强制硬件加速。CSS动画、变换和转换不会自动GPU加速，而是通过浏览器较慢的软件渲染引擎执行。为了使用GPU，我们使用translate3d

目前，Chrome、FireFox、Safari、IE9+和最新版本的Opera等浏览器都配备了硬件加速功能，只有在有迹象表明DOM元素会从中受益时才会使用。

Answer 5

请注意，它创建了一个堆叠上下文（加上其他答案所说的内容），因此它确实可能会对您所看到的内容产生影响，例如，在不应该出现的情况下，使某个东西出现在覆盖层上。

Answer 6

我使用的是mathlive和tiptap，在我的情况下，这一行导致在编辑公式时意外滚动到页面顶部。