我决定使用:
* {
-webkit-transform: translate3d(0px, 0px, 0px);
}
当我看到它使我的动画更加流畅时，可能是因为它强制硬件加速。但我还需要进行一些 z-index 调整，以便在文本前面放置一个形状，以在动画的某个点屏蔽该文本。问题是:我的(灰色)形状必须与文本后面的另一个形状(下例中的绿色形状)同步移动。
我构建了一个简单的 example使其更具视觉效果。它在 Firefox 上运行良好，但我无法在 Chrome 和 Safari 上运行。好吧，如果我删除 translate3d 东西，它会起作用，但由于我的实际元素需要大量滑动和流畅的动画，如果我这样做，用户体验会受到影响。
最佳答案
如果没有 translate3D，可以将对等 DOM 节点(您的文本)定位在另一个对等节点(您的处理程序)和它的一个子节点(您的掩码)之间，但这只是因为您的文本和处理程序都没有明确的 z 索引。在这种情况下，所有非 z 索引 block 首先呈现，然后最后呈现 mask - 最终在顶部(即使它是子元素)。这有意义吗？这就是浏览器的工作方式。
但是，当您将 translate3d 添加到“*”时，您向每个元素添加了一个“堆栈上下文”，因此没有 translate3d 的“碰巧有效”的内容现在无效了。顺便说一下，adding an explicit z-index to each element in your example - 也会“毁掉”你的面具。同样，您不能将对等 DOM 节点定位在另一个对等节点和它的一个子节点之间，因为就相对于叔叔/阿姨节点的定位而言，子节点会继承父节点的 z-index。
我的建议是取消嵌套你的东西，这样你想要在 z 轴上相对定位的所有东西都是 DOM 对等体。这需要手动计算每个元素的绝对定位，并且你失去了溢出裁剪的好处，但是 hey, it works .您还可以通过使用正负 z 值进行 3D 转换来复制它 - 但同样，仅限于对等元素。
(将 z-index 标记为 !important，只是撤消级联并将元素置于级联堆叠顺序的顶部。这是一个 hack。)
关于html - z-index 与 Chrome 上的 translate3D，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/12359993/