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

Question

更新

很抱歉没有添加细微的细节,我们也将很多div元素叠加在一起z-index.在解决了这个问题之后,似乎webkit-transform实际上与z-index排序混淆了,而实际问题与动画本身无关.

结束更新

我目前正处于一个项目中,我们开发了一个非常重视CSS3动画的应用程序.我们div用-webkit-transform和来制作很多元素-webkit-transition.

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

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

我可能会补充一点,我试图仅删除-webkit前缀(只留下transform),然后显示缺少的元素,但之后根本不会为元素设置动画,因为transform不支持CSS3属性.

我一直在使用也试过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将在它上面呈现.

因此,解决方案似乎是放入:s translate3d的定义<div>(将它添加到两者只是为了清楚):

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);">

Answer 2

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

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

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