Webkit-transform разбивает z-index на Safari

Проблема

Я пытаюсь создать слой, похожий на стену, падающую вниз, показывая слой за ним. Я установил две фиксированные позиции div. "Wall" div имеет z-индекс 9999, "Фоновый" div имеет z-индекс 0;

В браузерах Webkit (Safari/IOS), которые я тестировал, кажется, что, как только анимация начинается на "стене", z-индексы теряются или игнорируются, заставляя слой "стены" внезапно исчезать за фоном 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 (cribbed from 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.

Ответы

Ответ 1

Мой вращающийся элемент не был подходящим для соседства с фоном, но я исправил его, применив

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

родительскому элементу вращающегося элемента. Safari теперь думает, что это 1000px infront фона.

Ответ 2

Найден решение. Надеюсь, это поможет кому-то в будущем.

Оказывается, в версиях веб-сафари есть "ошибка". Когда анимация 3d css воспроизводится, исходные z-индексы теряются. Вместо этого кажется, что анимационные фрагменты помещаются в отдельную "группу" z-индекса, которая отделена от остальных z-индексов DOM.

Решение состоит в том, чтобы объединить div div и wall div в одну и ту же группу z-index, обернув его в div с помощью преобразования webkit, которое ничего не меняет. Это заставляет фон и стену быть дочерними элементами обертки 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 потерян после преобразования webkit translate3d

Ответ 3

Я столкнулся с этой проблемой, и ничего не исправит, пока я не добавлю перспективу в родительский контейнер элемента, который должен быть позади.

.wrap{
    perspective: 1000px;
}