Javascript webkit-transform 覆盖 Chrome 13 中的 z-index 排序
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6953497/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
webkit-transform overwrites z-index ordering in Chrome 13
提问by simonauner
Update
更新
Sorry for failing to add the minor detail that we also layer a lot of divelements on top of each other with z-index.
After working more with this problem, it seems that the webkit-transformactually messes with the z-indexordering, and that the actual problem is not related to the animations themselves.
很抱歉未能添加小细节，我们还div使用z-index. 在更多地解决这个问题之后，似乎webkit-transform实际上混乱了z-index排序，并且实际问题与动画本身无关。
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 divelements around with -webkit-transformand -webkit-transition.
我目前在一个项目中，我们开发了一个非常依赖 CSS3 动画的应用程序。我们正在div使用-webkit-transform和为许多元素设置动画-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.xxto 13.0.782.107mand now, all of a sudden, CSS3 properties with -webkitprefixes has stopped working, and elements which have this property applied to them just doesn't show anymore. Removing the -webkit-transformproperty through the Chrome debugger makes the elements visible again.
一切都很好，直到今天页面的所有动画元素都消失了。谷歌浏览器似乎已从12.xx更新到13.0.782.107m，现在突然间，带有-webkit前缀的CSS3 属性停止工作，应用了此属性的元素不再显示。-webkit-transform通过 Chrome 调试器删除该属性会使元素再次可见。
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 -webkitprefixes (leaving just transform), which then shows the missing elements, but then that won't animate the elements at all, as the CSS3 property transformis not supported.
我可能会补充说，我已经尝试只删除-webkit前缀（只留下transform），然后显示丢失的元素，但是这根本不会为元素设置动画，因为transform不支持CSS3 属性。
I have also tried using el.style.webkitTransformand el.style.WebkitTransform, with no success.
我也试过使用el.style.webkitTransformand el.style.WebkitTransform，但没有成功。
Will pass some example code to explain. The desired result of this is to move sq1away and reveal sq2.
将通过一些示例代码来解释。这样做的理想结果是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)";
回答by simonauner
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).
通过反复试验自己解决了这个问题。我想如果其他人偶然发现这个问题我会报告。仍然需要注意的是，这个问题在 Chrome 更新到 Chrome 13（13.0.782.107m）之前并没有出现。
The trick here seems to be to add a translate3doperation to the underlying <div>(sq2) element upon declaration (or atleast before animating sq1).
这里的技巧似乎是在声明时（或至少在动画之前）translate3d向底层<div>( sq2) 元素添加一个操作sq1。
Otherwise, the translate3doperation on the overlying <div>(sq1) will cause rendering to ignore the z-indexand place sq1below sq2. I'm guessing that this is because sq1is defined before sq2in the DOM, therefore sq2will be rendered above it.
否则，translate3d对上层<div>( sq1)的操作将导致渲染忽略z-index和 放置sq1在 下方sq2。我猜这是因为sq1之前sq2在 DOM 中定义过，因此sq2会在其上方呈现。
So, the solution seems to be to put translate3din the definition of the <div>:s (add it to both just to be clear):
因此，解决方案似乎是放入:stranslate3d的定义中<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);">
回答by Mayank
This should only affect any elements which are positioned as absolute or relative. In order to remedy the issue, you can apply the following css statement to every element which is positioned this way and is causing issues:
这应该只影响定位为绝对或相对的任何元素。为了解决此问题，您可以将以下 css 语句应用于以这种方式定位并导致问题的每个元素：
-webkit-transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
This will apply the transform to the element without actually doing a transformation, but affecting it's render order so it is above the element causing the issue.
这会将变换应用于元素而不实际进行变换，但会影响它的渲染顺序，因此它位于导致问题的元素上方。
回答by Rich Bradshaw
I think you need to try using -webkit-transformor webkitTransforminstead of webkit-transform.
我认为您需要尝试使用-webkit-transform或webkitTransform代替webkit-transform.
回答by duri
Use el.style.WebkitTransform(uppercase W).
使用el.style.WebkitTransform（大写 W）。
回答by Aaron Lee
el.style["-webkit-transition"] = "-webkit-transform 500ms linear";
el.style["webkit-transform"] = "translate3d(30px, 30px, 0px)";
Your missing the - on the second line, this could be the problem.
你错过了 - 在第二行，这可能是问题所在。
