webkit-transform 破坏了 Safari 上的 z-index答案

【问题标题】：webkit-transform breaks z-index on Safariwebkit-transform 破坏了 Safari 上的 z-index
【发布时间】：2014-05-02 12:38:02
【问题描述】：

问题

我试图让一个图层看起来像是一堵倒塌的墙，露出它后面的图层。我已经设置了两个固定的 div 位置。 “Wall” div 的 z-index 为 9999，“Background” div 的 z-index 为 0；

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

关于如何保留图层的 z 索引有什么想法吗？提前致谢！

示例代码 （注意：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 的差异。

【问题讨论】：

嗯，我在转换时遇到了类似的问题，但是当我切换到使用动画时，它起作用了

标签： html css safari webkit

【解决方案1】：

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

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

到旋转元素的父级。 Safari 现在认为它在背景前 1000 像素。

【讨论】：

【解决方案2】：

找到了解决办法。希望这对将来的某人有所帮助。

事实证明，在 safari 版本的 webkit 中存在一个“错误”。播放 3d css 动画时，原始 z-indexes 会丢失。相反，动画片段似乎被放入了一个单独的 z-index “组”，该组与 DOM 的其余 z-index 是分开的。

解决方案是将背景 div 和墙 div 加入到同一个 z-index 组中，方法是使用不会改变任何内容的 webkit-transform 将其包装在一个 div 中。这会导致背景和墙壁成为包装器 div 的子级，并保留各个子级的 z 索引。

<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

【讨论】：

工作得很漂亮，而且似乎是非侵入性的。

【解决方案3】：

我遇到了这个问题，直到我将透视图添加到应该在后面的项目的父容器之前，没有任何办法可以解决它。

.wrap{
    perspective: 1000px;
}

【讨论】：