css z-index在webkit变换translate3d后丢失 [英] css z-index lost after webkit transform 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，0，-1px）'}）; 
  

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

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

解决方案

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

基本上当您申请在z轴上的3D变换，z-index不再被考虑（你现在在一个3维渲染平面，使用不同的z值）。如果要切换回子元素的2D渲染，请使用 transform-style：flat; 。

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.

解决方案

This might be related to: https://bugs.webkit.org/show_bug.cgi?id=61824

Basically when you apply a 3D transform on the z-axis, the z-index can't be accounted for anymore (you're now in a 3 dimensional rendering plane, use different z-values). If you want to switch back to 2D rendering for child elements, use transform-style: flat;.

这篇关于css z-index在webkit变换translate3d后丢失的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！