webkit-transform 覆盖 Chrome 13 中的 z-index 排序 [英] webkit-transform overwrites z-index ordering in Chrome 13

问题描述

更新

很抱歉未能添加小细节，我们还使用 z-index 将许多 div 元素叠加在一起.在更多地解决这个问题之后，似乎 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/* 获取元素 */var el = document.getElementById("sq1");/* 应用 CSS */el.style["-webkit-transition"] = "-webkit-transform 500ms 线性";el.style["-webkit-transform"] = "translate3d(30px, 30px, 0px)";

解决方案

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

这里的技巧似乎是在声明(或至少在动画 sq1 之前).

否则，

(sq1) 上的 translate3d 操作将导致渲染忽略 z-index 并将 sq1 放在 sq2 下方.我猜这是因为 sq1 在 DOM 中定义在 sq2 之前，因此 sq2 将在其上方呈现.

因此，解决方案似乎是将 translate3d 放在

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

Update

Sorry for failing to add the minor detail that we also layer a lot of div elements on top of each other with z-index. After working more with this problem, it seems that the webkit-transform actually messes with the z-index ordering, and that the actual problem is not related to the animations themselves.

End update

I am currently in a project where we develop an application which is quite heavy on CSS3 animations. We're animating a lot of div elements around with -webkit-transform and -webkit-transition.

All is well, until today where all of the to-be-animated elements of the page disappeared. It seems that Google Chrome has updated from 12.xx to 13.0.782.107m and now, all of a sudden, CSS3 properties with -webkit prefixes has stopped working, and elements which have this property applied to them just doesn't show anymore. Removing the -webkit-transform property through the Chrome debugger makes the elements visible again.

Has anyone else experienced the same issues, or know how to solve this problem?

I might add that I've tried to remove just the -webkit prefixes (leaving just transform), which then shows the missing elements, but then that won't animate the elements at all, as the CSS3 property transform is not supported.

I have also tried using el.style.webkitTransform and el.style.WebkitTransform, with no success.

Will pass some example code to explain. The desired result of this is to move sq1 away and reveal 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)";

解决方案

Solved it myself through trial and error. Thought I'd report back if someone else stumbles upon this problem. It shall still be noted that this problem did not occur before Chrome updated itself to Chrome 13 (13.0.782.107m).

The trick here seems to be to add a translate3d operation to the underlying <div> (sq2) element upon declaration (or atleast before animating sq1).

Otherwise, the translate3d operation on the overlying <div> (sq1) will cause rendering to ignore the z-index and place sq1 below sq2. I'm guessing that this is because sq1 is defined before sq2 in the DOM, therefore sq2 will be rendered above it.

So, the solution seems to be to put translate3d in the definition of the <div>:s (add it to both just to be clear):

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

这篇关于webkit-transform 覆盖 Chrome 13 中的 z-index 排序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！