webkit-transform ломает z-index в Safari
проблема
Я пытаюсь сделать слой похожим на падающую стену, показывая слой позади него. Я установил две фиксированные позиции div. Div "Wall" имеет z-индекс 9999, div "Background" имеет 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 (взято из 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
Проверьте различия в Safari против Chrome.