webkit转换translate3d后css z-index丢失

发布于 2024-10-28 08:50:33 字数 830 浏览 1 评论 0原文

我有两个重叠的绝对定位 div 元素。两者都通过 css 设置 z-index 值。我使用 translate3d webkit 转换将这些元素从屏幕上移开，然后又返回到屏幕上。转换后，元素不再遵循其设置的 z-index 值。

谁能解释一下，当我对 div 元素进行 webkit 转换后，它们的 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 转换。

原文

I have two absolutely positioned div elements that overlap. Both have set z-index values via css. I use the translate3d webkit transform to animate these elements off the screen, and then back onto the screen. After the transform, the elements no longer respect their set z-index values.

Can anyone explain what happens to the z-index / stack-order of the div elements once I do a webkit transform on them? And explain what I can do to keep the stack-order of the div elements?

Here is some more information on how I am doing the transform.

Before the transform, each element gets these two webkit transition values set via css (I am using jQuery to do the .css() function calls:

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

The element is then animated using the translate3d -webkit-transform:

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

Btw, I have tried setting the 3rd parameter of translate3d to several different values to try to replicate the stack-order in the 3d space, but to no luck.

Also, iPhone/iPad and Android browsers are my target browser that this code needs to run on. Both support webkit transitions.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

浪漫人生路 2024-11-04 08:50:33

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

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

回复收藏 0 原文

长梦不多时 2024-11-04 08:50:33

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

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

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

This is most definitely related to the bug noted by samy-delux. 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:

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

This will apply the transform to the element without actually doing a transformation, but affecting its render order so it is above the element causing the issue.

回复收藏 0 原文

半岛未凉 2024-11-04 08:50:33

有点晚了，但尝试放置失去 Z 索引的元素，放置以下内容，我最近在做一些视差工作时遇到了问题，这有很大帮助。

transform-style: preserve-3d;

这样可以避免放置

transform: translate3d(0,0,0);

其他元素，从而给 GPU 带来更多压力

Bit Late to this but try putting on the elements that have lost their Z-index placing the following, I had an issue when doing some parallax stuff recently and this helped massively.

transform-style: preserve-3d;

This saves putting

transform: translate3d(0,0,0);

On other elements which puts more strain on the GPU

回复收藏 0 原文

何必那么矫情 2024-11-04 08:50:33

等待查看示例

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

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

我希望这有帮助

回复收藏 0 原文

蓝海似她心 2024-11-04 08:50:33

设置可堆叠元素的样式，则 z-index 将适用于 3D 转换的 div ->

如果您在 codepen 上使用 -webkit-transform:translateZ(0px); Snippet http://codepen.io/mrmoje/pen/yLIul

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

回复收藏 0 原文

北恋 2024-11-04 08:50:33

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

translate3d 函数的第三个参数控制元素的 z 轴。这个概念与 z 索引类似，但不完全相同...z 轴较低的元素位于值较高的元素下方。

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

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

尽管这并不完全是您想要的，但这种行为提供了一个解决方案。您只需要使用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>

I haven't been able to reproduce the problem you describe here. Regardless of what I do, the z-index value is retained throughout all transforms. I'm testing using Chromium (Google Chrome).

The third argument of the translate3d function manipulates the z-axis of the element. The concept is similar to, but not exactly the same as, the z-index... Elements with a lower z-axis are under elements with a higher value.

I know you tried values of the third argument to match your intended z-index, but the problem is that the z-axis doesn't seem to change during CSS3 animation. In the following example, the hovered element should be on top, but #element_a stays on top.

If I add a z-index to both the regular selector and the :hover selector, it seems to work and allow the hovered element to be top-most.

Although it's not exactly what you were looking for, this behavior provides a solution. You just need to use translate3d and z-index to set the order for the initial rendering.

<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>

回复收藏 0 原文

り繁华旳梦境 2024-11-04 08:50:33

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

将其添加到下拉元素中：

transform: translate3d(0,0,0);

...并且它已修复。谢谢 stackoverflow 的人们。

I had this problem on iphone/ios where I had a dropdown menu that overlapped a leafletjs map but was being covered by the map. Noticed that the map had translate3d applied.

Added this to the dropdown element:

transform: translate3d(0,0,0);

...and it is fixed. Thank you stackoverflow people.

回复收藏 0 原文

背叛残局 2024-11-04 08:50:33

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

# 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

Another way around this is that you can create a parent element and apply all other transitions related to it:

# 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

回复收藏 0 原文

~没有更多了~