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

Question

更新

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

结束更新

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

一切都很好，直到今天页面的所有待动画元素都消失了。谷歌浏览器似乎已经从 12.xx 更新到 13.0.782.107m 现在，突然之间，-webkit 的 CSS3 属性prefixes 已停止工作，并且应用了此属性的元素不再显示。通过 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)";

Answer 1

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

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

否则，translate3d上层操作 <div> ( sq1 ) 将导致渲染忽略 z-index并放置 sq1下面sq2 .我猜这是因为 sq1在 sq2 之前定义在 DOM 中，因此 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);">