html – Chrome上的z-index vs translate3D

发布时间：2020-12-14 22:48:17 所属栏目：资源来源：网络整理

导读：我决定用： * { -webkit-transform: translate3d(0px,0px,0px);} 当我看到它使我的动画更加平滑时,可能是因为它强制硬件加速.但我还需要进行一些z-index调整,以便在文本前面放置一个形状,以便在动画的某个位置屏蔽该文本.问题是：我的(灰色)形状必须与另一个

我决定用：

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

当我看到它使我的动画更加平滑时,可能是因为它强制硬件加速.但我还需要进行一些z-index调整,以便在文本前面放置一个形状,以便在动画的某个位置屏蔽该文本.问题是：我的(灰色)形状必须与另一个形状(下面示例中的绿色形状)同步移动,该形状位于文本后面.

我构建了一个简单的example,使其更具视觉效果.它适用于Firefox,但我无法让它在Chrome和Safari上运行.好吧,如果我删除translate3d的东西,它可以工作,但由于我的实际项目需要大量的滑动和平滑的动画,如果我这样做,用户体验将受到影响.

最佳答案

如果没有translate3D,可以将对等DOM节点(您的文本)放在另一个对等体(您的处理程序)和它的一个子节点(您的掩码)之间,但这只是因为您的文本和处理程序都没有明确的z索引.在这种情况下,首先渲染所有非z索引块,然后最后渲染掩码 – 最后显示在顶部(即使它是子元素).这有意义吗？好吧,它是浏览器的工作方式.

但是,当您将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,只需撤消级联并将元素置于级联堆叠顺序之上.这是一个黑客攻击.)

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!