-webkit-transform: translate3d(0,0,0);
可以让一些设备运行其硬件加速。
可以在这里找到更多信息 Here
原生应用程序可以访问设备的图形处理单元(GPU)来实现高效的像素渲染。另一方面,Web 应用程序运行在浏览器的上下文中,大部分(如果不是全部)渲染由软件完成,导致转换所需的计算能力较低。但 Web 已经在赶超,大多数浏览器供应商现在通过特定的 CSS 规则提供了图形硬件加速。
使用 -webkit-transform: translate3d(0,0,0);
可以激活 GPU 以进行 CSS 转换,使其更加平滑(帧率更高)。
注意: translate3d(0,0,0)
在您看到的内容方面没有任何作用。它只是一种强制硬件加速的技术,将对象移动 0 像素在 x、y 和 z 轴上。
另一种选择是 -webkit-transform: translateZ(0)
。如果由于转换而在 Chrome 和 Safari 上出现闪烁,请尝试使用 -webkit-backface-visibility: hidden
和 -webkit-perspective: 1000
。有关更多信息,请参阅此文章。
translate3d(0,0,0)
和translateZ(0)
会导致位置固定的问题。 -webkit-font-smoothing: antialiased;
是另一种利用3D加速而不会产生这些问题的方法,但它只在Safari中有效。 - Watchmaker我没有看到任何一个解释这个的答案。许多转换可以通过计算每个 div
及其选项并使用复杂的验证集来完成。但是,如果您使用 3D 函数,则您拥有的每个 2D 元素都被视为 3D 元素,我们可以对这些元素进行矩阵变换(在运行时)。然而,大多数元素“从技术上讲”已经具有硬件加速,因为它们都使用 GPU。但是,3D 转换直接作用于每个这些 2D 渲染版本(或 div
的缓存版本)和它们上面的矩阵变换(这些变换是向量化和并行化 FP 数学)。
需要注意的是,3D 转换仅对缓存的 2D div
上的特性进行更改(换句话说,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.
步骤三:渲染复合图层
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);
}
在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);
}
Translate3D 强制启用硬件加速。CSS 动画、变换和过渡不会自动使用GPU 加速,而是从浏览器较慢的软件渲染引擎执行。为了使用 GPU,我们使用 translate3d。
目前,像 Chrome、FireFox、Safari、IE9+ 和最新版本的 Opera 浏览器都带有硬件加速功能,只有在它们发现一个 DOM 元素可以受益于此时才会使用它。
我正在使用mathlive和tiptap,在我的情况下,这行代码在编辑公式时导致了意外的滚动到页面顶部。
translate3d(0,0,0)
会出现略微不同的行为。它使我的一个元素变得不可见,所以我将其删除了。 - David Sherretwill-change
属性还会将 HTML 元素分离成自己的一层。详见 https://developer.mozilla.org/en-US/docs/Web/CSS/will-change。will-change
属性将取代-webkit-transform:translate3d(0,0,0)
的 hack。 - Jason Lydon