css z-index在webkit变换translate3d后丢失

我有两个绝对定位的div元素重叠。两者都通过css设置z-index值。我使用translate3d webkit转换来使这些元素在屏幕上动画，然后回到屏幕上。在变换之后，元素不再遵守它们设置的z-index值。

任何人都可以解释一下当对它们进行webkit转换时，div元素的z-index / stack-order会发生什么？并解释我能做些什么来保持div元素的堆栈顺序？

这里是一些更多的信息，我如何做变换。

在转换之前，每个元素通过css设置这两个webkit的过渡值(我使用jQuery做.css()函数调用：

element.css({ '-webkit-transition-duration': duration + 's' });
element.css({ '-webkit-transition-property': '-webkit-transform' });

然后使用translate3d -webkit-transform来对元素进行动画处理：

element.css({ '-webkit-transform': 'translate3d(' + hwDelta + 'px,-1px)' });

Btw，我已经尝试将translate3d的第三个参数设置为几个不同的值，尝试复制堆栈顺序在3d空间，但没有运气。

此外，iPhone / iPad和Android浏览器是我的目标浏览器，这段代码需要运行。两者都支持webkit转换。

解决方法

这可能与： https://bugs.webkit.org/show_bug.cgi?id=61824有关

基本上当您在z轴上应用3D变换时，z-index不能被计算(您现在处于3维渲染平面，使用不同的z值)。如果要切换回子元素的2D渲染，请使用transform-style：flat;