Chrome浏览器中的z-index与translate3D的区别

Question

我决定使用：

* {
    -webkit-transform: translate3d(0px, 0px, 0px);
}

当我看到它可以使我的动画更加流畅时，我觉得它可能是因为它强制使用了硬件加速。但是我还需要进行一些z-index调整，以便在动画的某个点上将一个形状放在文本前面，以遮罩该文本。

问题是：我的（灰色）形状必须与另一个形状（下面示例中的绿色形状）同步移动，而该形状位于文本后面。

我建立了一个简单的示例，以使其更加直观。在Firefox上运行得很好，但是我就是无法让它在Chrome和Safari上运行。如果我删除translate3d这个东西，它就能够工作了，但是由于我的实际项目需要大量滑动和平滑的动画效果，如果我那样做，用户体验就会受到影响。

- Izaias

---

我认为Chrome表现正确，但Firefox没有。 #handler元素为其子元素建立了“最大”堆栈级别。即使#mask的z-index整数值高于#text，也不意味着#mask在视觉上会高于#text。虽然我可能错了，这就是为什么我将其发布为评论的原因。 - Blender

谢谢Ana。很有道理。但是，当我删除translate3d部分时，为什么它在Chrome上仍然像预期的那样工作呢？看看http://jsfiddle.net/izaiasdotcom/8Zs4e/1/。很奇怪，不是吗？ - Izaias

Answer 1

没有translate3D，可能会在另一个同级节点（您的处理程序）和其子节点（您的掩码）之间定位对等的DOM节点（您的文本），但这仅因为您的文本和处理程序都没有显式的z-index。在这种情况下，所有非z-index块都先呈现，然后掩码最后呈现 - 最终在顶部（即使它是子元素）。这有意义吗？好吧，这就是浏览器的工作方式。

然而，当您向“*”添加translate3d时，您为每个元素添加了一个“堆叠上下文”，因此现在没有translate3d时“可以工作”的内容现在不再适用。顺便说一下， 在您的示例中为每个元素添加显式z-index - 也会“破坏”您的掩码。同样，您无法在另一个同级节点和其子节点之间定位对等的DOM节点，因为子节点相对于叔/姑节点的定位继承父节点的z-index。

我的建议是将您的内容解除嵌套，这样您想要在z轴上相对定位的所有内容都是DOM节点。这需要手动计算每个元素的绝对定位，并且您会失去溢出剪切的优势，但是嘿，它能用。您还可以通过使用正值和负值的3D变换来复制此操作-但仅限于同级元素。 （将z-index标记为! important只会撤消级联并将元素放置在级联堆栈顺序的顶部。这是一种hack方法。）

- Michael Mullany

---

谢谢Michael，你说得没错！我的目标实际上是同时动画化遮罩和文本后面的形状，但似乎不可能在保持运动平滑的同时实现。请查看下面的示例，以了解后者如何运行得更加平稳（但没有前置遮罩）。在我的实际项目中，差异呈指数级增长：http://jsfiddle.net/izaiasdotcom/78qak/4/ 和 http://jsfiddle.net/izaiasdotcom/78qak/5/ - Izaias

我认为这是因为当您将非三维转换与三维转换的内容交错时，它无法进行GPU加速 - 基本上，GPU需要被交付一个正方形，在其中它完全负责变化。 - Michael Mullany

明白了！我们应该使用CSS clip属性来遮罩文本，并根据其他对象的位置更新矩形值。这里有一些信息http://www.w3schools.com/cssref/pr_pos_clip.asp。这个链接也非常有见地http://webdesignerwall.com/tutorials/5-simple-but-useful-css-properties。 - Izaias

Answer 2

明白了！我们可以使用 CSS 的 clip 属性来遮罩文本并根据其他对象的位置更新矩形值。这里有一些信息 w3schools.com/cssref/pr_pos_clip.asp。这个链接也非常有洞察力 http://webdesignerwall.com/tutorials/5-simple-but-useful-css-properties。

最后，这是我的项目，完成于 http://iuqo.com。当你拖动背景时，你会看到文本被垂直和漂亮地切断。正如我想要的那样。

- Izaias