webkit-transform在Safari上破坏了z-index

Question

问题

我试图让一个层看起来像是一堵倒下的墙，揭示了它后面的层。我设置了两个固定的div位置。“墙”div的z-index为9999，“背景”div的z-index为0;

在我测试过的Webkit浏览器（Safari/IOS）中，似乎一旦“墙”的动画开始，z-index就会丢失或被忽略，导致“墙”层突然消失在背景div后面。

有什么想法可以保留层的z-index吗？感谢您的帮助！

示例代码 （注意：jsFiddle在底部）

HTML代码

<div id="wall">
    This is the wall
</div>

<div id="background">
    This is the background
</div>

<button id="start" style="float: right;">
Flip Down
</button>

一些 JavaScript 代码以启用按钮

$('#start').click(function(){
    alert('Should Fall Down like a wall, revealing the background');
    $('#wall').addClass('animated flipDown');
});

CSS 代码（来自于 animate.css）

#wall{
    background-color: #F00;
    width: 100px;
    height: 100px;
    position:fixed;
    top:0;
    left:0;
    z-index: 9999;
}

#background{
    background-color: #00F;
    width: 100px;
    height: 100px; 
    position:fixed;
    top:0;
    left:0;
    z-index: 0;
}

.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}


/*** flipDown ***/

@-webkit-keyframes flipDown {
  0% {
    -webkit-transform: perspective(400px) rotateX(0deg);
    transform: perspective(400px) rotateX(0deg);
    -webkit-transform-style: flat;
    opacity: 1;
  }

  100% {
    -webkit-transform: perspective(400px) rotateX(90deg);
    transform: perspective(400px) rotateX(90deg);
    -webkit-transform-style: flat;
    opacity: 1;
  }
}

@keyframes flipDown {
  0% {
    -webkit-transform: perspective(400px) rotateX(0deg);
    -ms-transform: perspective(400px) rotateX(0deg);
    transform: perspective(400px) rotateX(0deg);
    opacity: 1;
  }

  100% {
    -webkit-transform: perspective(400px) rotateX(90deg);
    -ms-transform: perspective(400px) rotateX(90deg);
    transform: perspective(400px) rotateX(90deg);
    opacity: 0;
  }
}

.flipDown {
    -webkit-animation-name: flipDown;
    animation-name: flipDown;
    -webkit-backface-visibility: visible !important;
    -ms-backface-visibility: visible !important;
    backface-visibility: visible !important;
    -webkit-transform-origin: bottom;
    -ms-transform-origin: bottom;
    transform-origin: bottom;
}

jsFiddle

http://jsfiddle.net/3mHe2/2/

请查看Safari和Chrome之间的差异。

- zeroSkillz

---

嗯，我之前也遇到过转换的类似问题，但当我改用动画时它就起作用了。 - w00t

Answer 1

我的旋转元素与背景的相邻关系不太合适，但我通过应用修复了它

transform: translateZ(1000px);
transform-style: preserve-3d;

对于旋转元素的父元素而言，Safari现在认为它在背景的前面1000像素。

- Kit Sunde

Answer 2

找到了解决方法。希望这对未来的某个人有所帮助。

原来在 Safari 版本的 Webkit 中存在一个“错误”。当3D CSS动画正在播放时，原始的 z-index 会丢失。相反，似乎动画部分被放入一个单独的 z-index“组”中，与 DOM 的其余 z-index 分开。

解决方法是通过用一个不改变任何内容的 Webkit-transform 包装背景和墙面的 div，将它们加入到同一 z-index 组中。这将使背景和墙面成为包装器 div 的子元素，并保留各自子元素的 z-index 排序。

<div id="wrapper" style="-webkit-transform: translate3d(0px, 0px, 0px);">
    <div id="wall">
        This is the wall
    </div>

    <div id="background">
        This is the background
    </div>
</div>

我认为这个问题与这个类似或相同：

css z-index lost after webkit transform translate3d

- zeroSkillz

---

工作得非常出色，似乎是无侵入性的。 - Mike Fuchs

Answer 3

我遇到了这个问题，一直无法解决，直到我给应该在后面的项目的父容器添加了透视效果。

.wrap{
    perspective: 1000px;
}

- pizzarob

Answer 4

在我的情况下，我能够通过将 translateZ 应用于父元素并将缩放应用于子元素来解决问题。

.parent {
  transform: translateZ(22px);
}
.child {
  transform: scale(0.955);
}

- zyrup