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

Update

抱歉未能添加我们也分层了很多的小细节div元素彼此叠加z-index。 在对这个问题进行更多研究之后，似乎webkit-transform实际上与z-index顺序，并且实际问题与动画本身无关。

结束更新

我目前正在开发一个应用程序，该项目非常依赖 CSS3 动画。我们正在制作很多动画div周围的元素-webkit-transform and -webkit-transition.

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

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

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

我也尝试过使用el.style.webkitTransform and 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)";

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

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

否则，translate3d对上层进行操作<div> (sq1）将导致渲染忽略z-index并放置sq1 below 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);">