webkit-transform 覆盖 Chrome 13 中的 z-index 排序

Posted 2023-03-06

【中文标题】webkit-transform 覆盖 Chrome 13 中的 z-index 排序

【英文标题】：webkit-transform overwrites z-index ordering in Chrome 13

【发布时间】：2011-10-20 16:14:03

【问题描述】：

更新

很抱歉未能添加我们还将许多div 元素与z-index 叠加在一起的小细节。 在解决了这个问题之后，似乎webkit-transform 实际上与z-index 排序混淆了，实际问题与动画本身无关。

结束更新

我目前在一个项目中，我们开发一个非常依赖 CSS3 动画的应用程序。我们正在使用-webkit-transform 和-webkit-transition 为大量div 元素设置动画。

一切都很好，直到今天页面上所有的动画元素都消失了。谷歌浏览器似乎已从 12.xx 更新到 13.0.782.107m，现在，突然之间，带有 -webkit 前缀的 CSS3 属性已经停止工作，并且应用了此属性的元素不再显示。通过 Chrome 调试器删除 -webkit-transform 属性会使元素再次可见。

有没有其他人遇到过同样的问题，或者知道如何解决这个问题？

我可能会补充一点，我尝试只删除 -webkit 前缀（只留下 transform），然后显示缺少的元素，但那样根本不会为元素设置动画，因为 CSS3 属性不支持transform。

我也尝试过使用el.style.webkitTransform 和el.style.WebkitTransform，但没有成功。

将通过一些示例代码进行解释。这样做的预期结果是将sq1 移开并显示sq2。

html:
<div id="sq1" style="z-index:10;">
<div id="sq2" style="z-index:5;">

JS
/* fetch the element */
var el = document.getElementById("sq1");
/* apply CSS */
el.style["-webkit-transition"] = "-webkit-transform 500ms linear";
el.style["-webkit-transform"] = "translate3d(30px, 30px, 0px)";

【问题讨论】：

我知道这个问题很老了，但如果有人发现这个问题，z-index 是关于 CSS 堆叠顺序的，transform 是关于在 3D 空间中转换元素，这些是不相关的概念。

【参考方案1】：

这应该只影响定位为绝对或相对的任何元素。为了解决此问题，您可以将以下 css 语句应用于以这种方式定位并导致问题的每个元素：

-webkit-transform: translate3d(0,0,0);

这会将转换应用于元素而不实际进行转换，但会影响其渲染顺序，因此它位于导致问题的元素上方。

【讨论】：

非常感谢这个技巧。我遇到了一些 CSS 样式问题，用于在图标旋转时创建一个“闪烁”正方形的圆圈。将此添加到我的 CSS 修复它。

【参考方案2】：

自己通过反复试验解决了这个问题。以为如果其他人偶然发现这个问题，我会报告回来。需要注意的是，在 Chrome 更新到 Chrome 13 (13.0.782.107m) 之前没有出现这个问题。

这里的技巧似乎是在声明时（或至少在动画 sq1 之前）将 translate3d 操作添加到底层 <div> (sq2) 元素。

否则，对上层<div> (sq1) 的translate3d 操作将导致渲染忽略z-index 并将sq1 置于sq2 下方。我猜这是因为 sq1 在 DOM 中定义在 sq2 之前，因此 sq2 将在其上方呈现。

因此，解决方案似乎是将translate3d 放在<div>:s 的定义中（为了清楚起见，将其添加到两者中）：

HTML:
<div id="sq1" style="z-index:10; -webkit-transform: translate3d(0px, 0px, 0px);">
<div id="sq2" style="z-index:5; -webkit-transform: translate3d(0px, 0px, 0px);">

【讨论】：

Legend - 这只是修复了我面临的一个类似的、烦人的错误。谢谢！

非常感谢！ - 这确实帮助我解决了我在 android 上使用 photoswipe 时遇到的 zindex 问题

不知道你是怎么想出来的。在过去的两天里，我一直在努力解决一个听起来很相似但没有浏览器更新的问题。三层堆叠在一起——L1、L2和L3。 L3 是动画的。一切正常。我们决定将动画添加到 L2。一切都乱了套。 L3，具有最高 z-index 的那个应该是可见的，但我们在 L2 上看到了。点击等将被排除在 L3 之外。只是它不可见。我们将身份转换 translate3d(0,0,0) 添加到 L2 的 div 中，一切正常。有什么解释的指针吗？

我遇到了一个问题，即 transform rotateY 会导致奇怪的 z-index 行为。但是，绘制顺序是正确的，点击处理程序的顺序错误。更奇怪的是，它只影响部分元素。建议的解决方法不起作用，我必须找到一种方法来停止使用 rotateY(180deg)。

在我想要“在前面”的元素上添加 translate3d(0, 0, 1px) 对我有用。

【参考方案3】：

使用el.style.WebkitTransform（大写W）。

【讨论】：

也已经尝试过了，很抱歉没有将webkitTransform 和WebkitTransform 都放在问题中。

【参考方案4】：

 el.style["-webkit-transition"] = "-webkit-transform 500ms linear";
 el.style["webkit-transform"] = "translate3d(30px, 30px, 0px)";

您在第二行缺少 - ，这可能是问题所在。

【参考方案5】：

我认为您需要尝试使用-webkit-transform 或webkitTransform 而不是webkit-transform。