webkit 转换 translate3d 后 css z-index 丢失

Question

我有两个重叠的绝对定位的 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, 0, -1px)' });

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

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

Answer 1

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

基本上，当您在 z 轴上应用 3D 变换时，z 索引将不再被考虑(您现在处于 3 维渲染平面，使用不同的 z 值)。如果您想为子元素切换回 2D 渲染，请使用 transform-style: flat;。