Question

更新

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

结束更新

我目前正处于一个项目中，我们开发了一个非常重视CSS3动画的应用程序。我们使用div和-webkit-transform制作了大量-webkit-transition元素。

一切都很好，直到今天，页面的所有待动画元素都消失了。 Google Chrome浏览器似乎已从 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)";

Answer 1

通过反复试验解决了这个问题。以为我会报告其他人是否偶然发现了这个问题。仍然需要注意的是，在Chrome更新到Chrome 13（13.0.782.107m）之前没有出现此问题。

这里的技巧似乎是在声明时（或在动画translate3d之前至少）向基础<div>（sq2）元素添加sq1操作。

否则，覆盖translate3d（<div>）的sq1操作会导致呈现忽略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);">

Answer 2

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

-webkit-transform：translate3d（0,0,0）;

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

Answer 3

我认为您需要尝试使用-webkit-transform或webkitTransform代替webkit-transform。

Answer 4

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

Answer 5

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

你错过了 - 在第二行，这可能是问题所在。

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

5 个答案: