webkit-transform会覆盖Chrome 13中的z-index顺序 [英] webkit-transform overwrites z-index ordering in Chrome 13
问题描述
更新
很抱歉，无法添加细节，我们还添加了很多 div 元素，其中 z-index 。
在处理这个问题后，看起来 webkit-transform 实际上与 z-index
$ b $ b
我目前在一个项目中，我们开发一个在CSS3动画上相当重的应用程序。我们用 -webkit-transform 和 -webkit动画了很多。 div -transition
一切都很好，直到今天页面的所有动画元素都消失了。看来Google Chrome浏览器已从 12.xx 更新为 13.0.782.107m ，现在，突然， -webkit-transform 属性会使元素再次显示。
同样的问题，或者知道如何解决这个问题？
我可能补充说，我试图删除只是 -webkit 前缀（只剩下 transform ），然后显示缺少的元素，但是这不会对元素进行动画处理，因为CSS3属性<$ c $ $ c>和 el.style.WebkitTransform ，没有成功。
将通过一些示例代码来解释。所需的结果是移动 sq1 ，并显示 sq2 。
HTML：
< div id =sq1style =z-index：10;>
< div id =sq2style =z-index：5;>
JS
/ * fetch元素* /
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）之前。
这里的伎俩好像是添加了一个<对< div> （ sq2 ）执行code> translate3d 元素（或至少在动画 sq1 之前）。
否则，对上层< div> 执行 translate3d $ c>（ sq1 ）将导致渲染忽略 z-index ，并将 sq1 sq2 。我猜这是因为 sq1 在DOM中的 sq2 之前定义，因此
所以，解决方案似乎是把 translate3d 在< div> ：s的定义中（添加到两者只是为了清楚）：
HTML：
< div id =sq1style =z-index：10; -webkit-transform：translate3d（0px，0px，0px）;> ;
< div id =sq2style =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屋！
