webkit转换translate3d后css z-index丢失

Question

webkit转换translate3d后css z-index丢失

我有两个绝对定位的div元素重叠。两者都通过css设置了z-index值。我使用translate3dwebkit变换在屏幕上为这些元素设置动画，然后再返回到屏幕上。变换后，元素不再遵循其设定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, 0, -1px)' });

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

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

Answer 1

位迟到这一点但是试着把丢失了Z-index的元素放在下面，我最近在做一些视差的时候遇到了一个问题，这有点大大帮助了。transform-style: preserve-3d;这节省了推杆transform: translate3d(0,0,0);其他因素会给GPU带来更多压力

Answer 2

这绝对与samy-delux指出的bug有关。这应该只影响任何定位为绝对或相对的元素。为了解决该问题，您可以将以下css语句应用于以这种方式定位并导致问题的每个元素：-webkit-transform: translate3d(0,0,0);这将将变换应用于元素而不实际进行转换，但会影响其渲染顺序，因此它位于导致问题的元素之上