webkit转换translate3d后css z-index丢失答案

【问题标题】：css z-index lost after webkit transform translate3dwebkit转换translate3d后css z-index丢失
【发布时间】：2011-07-25 06:34:58
【问题描述】：

我有两个重叠的绝对定位的 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 转换。

【问题讨论】：

你能发个链接看看这个例子吗？
我遇到了同样的问题。我有一个带有内部元素样式“-webkit-transform: translate3d(0,0,0)”的标签来强制 3d 加速。事实证明，具有较高 z-index 的外部框架总是被内部 iframe 元素隐藏。只是视觉隐藏，我可以“点击”不可见的外部元素。这只发生在 Mobile Safari 中。
我花了 10 小时弄清楚是什么让我的代码无法工作。呃

标签： css webkit transform

【解决方案1】：

等待查看示例

您是否尝试过进行变换比例（1）？我记得有一个类似的问题，我不得不重新排列元素的 html 顺序，并使用我不需要的转换，只是因为使用转换的 z-index 发生了变化。

如果我没记错的话，每次你使用转换时，它都会成为可用的最高 z-index，并且它是按 html 的最近元素排序的，是到标签的开头。所以从上到下。

希望对你有所帮助

【讨论】：

【解决方案2】：

我无法重现您在此处描述的问题。无论我做什么，z-index 值都会在所有转换中保留。我正在使用 Chromium (Google Chrome) 进行测试。

translate3d 函数的第三个参数操纵元素的 z 轴。这个概念与 z-index 类似，但并不完全相同。z 轴较低的元素位于较高值的元素之下。

我知道你尝试了第三个参数的值来匹配你想要的 z-index，但问题是 z 轴在 CSS3 动画期间似乎没有改变。在以下示例中，悬停的元素应位于顶部，但 #element_a 仍位于顶部。

如果我向常规选择器和 :hover 选择器添加 z-index，它似乎可以工作并允许悬停的元素位于最顶部。

虽然这不是您想要的，但这种行为提供了一个解决方案。您只需要使用 translate3d 和 z-index 来设置初始渲染的顺序。

<style>
    div {
        width: 300px;
        height: 150px;
        background-color: white;
        border: 5px outset gray;
        float: left;
        margin: 20px;
        -webkit-transition: 2s;
    }

    #element_a {
        -webkit-transform: translate3d(0, 0, 50px);
    }
    #element_b {
        -webkit-transform: translate3d(0, 0, 100px);
    }

    #element_a:hover {
        -webkit-transform: translate3d(100px, 0, 60px);
    }

    #element_b:hover {
        -webkit-transform: translate3d(-100px, 0, -60px);
    }
</style>
<body>
    <div id="element_a">
        <img src="http://www.google.com/intl/en_com/images/srpr/logo3w.png">
    </div>
    <div id="element_b">
        <img src="http://www.google.com/intl/en_com/images/srpr/logo3w.png">
    </div>
</body>

【讨论】：

这对我有用——谢谢！我将以下内容添加到我想要“在前面”的元素中：-webkit-transform: translate3d(0, 0, 1px);

【解决方案3】：

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

基本上，当您在 z 轴上应用 3D 变换时，z-index 无法再考虑（您现在处于 3 维渲染平面，使用不同的 z 值）。如果要为子元素切换回 2D 渲染，请使用 transform-style: flat;。

【讨论】：

基本上当您在 z 轴上应用 3D 变换时，z-index 无法再考虑（您现在处于 3 维渲染平面，使用不同的 z 值） .如果要为子元素切换回 2D 渲染，请使用 transform-style: flat;。
所以在“preserve-3d”模式下我们必须使用变换的z轴来设置顺序，而在平面模式下我们应该使用z-index。错误是 safari 上的 z-index 与硬件加速转换结合使用时会被破坏。
不起作用。仅当我按类删除动画样式时才有效。

【解决方案4】：

这肯定与 samy-delux 指出的错误有关。这应该只影响定位为绝对或相对的任何元素。为了解决此问题，您可以将以下 css 语句应用于以这种方式定位并导致问题的每个元素：

-webkit-transform: translate3d(0,0,0);

这会将变换应用于元素而不实际进行变换，但会影响其渲染顺序，因此它位于导致问题的元素上方。

【讨论】：

使用 Chrome (35.0.1916.114 m)，我发现如果我没有这个规则，在元素被翻转后 [transform: rotateY(180deg)]，jQuery click handlers 没有'不再适用于该元素。此外，翻转后，人工制品会留在屏幕上，特别是如果它们的不透明度发生了变化，除非存在 translate3d！这篇文章帮助了sitepoint.com/fix-chrome-animation-flash-bug
这刚刚解决了一个对我来说非常棘手的问题，涉及两个固定元素，一个包含 3d 转换元素。 3d 转换元素基本上会溢出并位于另一个元素的顶部，直到应用上述修复。
不起作用。仅当我按类删除动画样式时才有效。

【解决方案5】：

如果您使用-webkit-transform: translateZ(0px); 设置可堆叠元素的样式，z-index 将对 3d 转换的 div 起作用

codepen 上的片段 -> http://codepen.io/mrmoje/pen/yLIul

在示例中，按钮 stack up 和 stack down 针对旋转的元素（在本例中为 img）升高和降低页脚的 z-index (+/-1)。

【讨论】：

无法再次点击堆栈
嘿@Moje 我也想知道这个问题。堆叠起来仍然无法再次点击。
为什么我没有想到给翻译后的元素添加一个负的 z-index？谢谢

【解决方案6】：

这有点晚了，但尝试将失去 Z-index 的元素放在下面，我最近在做一些视差的东西时遇到了问题，这有很大帮助。

transform-style: preserve-3d;

这样可以节省推杆

transform: translate3d(0,0,0);

其他对 GPU 造成更大压力的元素

【讨论】：

当你的元素是 3d 时，我不希望转换会给 GPU 带来额外的压力。无论如何都需要进行计算。你的依据是什么？

【解决方案7】：

解决此问题的另一种方法是，您可以创建一个父元素并应用与其相关的所有其他过渡：

# Apply transitions to a parent div
<div>
  # This image z-index -1 
  <img src="foo"/>

  # This image z-index -3
  <img src="bar"/>

  #This image z-index -2
  <img src="gg"/>
</div>

JsFiddle

【讨论】：

【解决方案8】：

我在 iphone/ios 上遇到了这个问题，我的下拉菜单与 Leafletjs 地图重叠，但被地图覆盖。注意到地图已应用 translate3d。

将此添加到下拉元素中：

transform: translate3d(0,0,0);

...它是固定的。谢谢stackoverflow的人。

【讨论】：