webkit-transform sauts de z-index sur Safari

Problème

Je suis en train de faire une couche d'apparaître comme un mur à tomber, révélant la couche derrière elle. J'ai de l'installation fixe de deux div positions. Le "Mur" div a un z-index de 9999, le "Fond" de div a un z-index de 0;

Dans les navigateurs Webkit (Safari/IOS) que j'ai testé, il me semble que une fois que l'animation démarre sur le "mur", le z-index sont perdus ou ignoré, provoquant le "mur" de la couche d'brusquement disparaître derrière l'arrière-plan div.

Des idées sur la façon de préserver le z-index de l'couches? Merci à l'avance!

Exemple De Code
(note: jsFiddle en bas)

Code 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>

Un peu de javascript pour activer le bouton

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

Code CSS (chipé par les animer.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/

Découvrez les différences dans Safari vs Chrome.

Hmmm, j'ai eu un problème similaire avec la transition, mais quand je suis passé à l'aide de l'animation, il a travaillé

OriginalL'auteur zeroSkillz | 2014-03-24

  1. 16

    Mon élément rotatif n'était pas approprié d'avoir un voisin à l'arrière-plan, mais je l'ai corrigé en appliquant

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

    le parent de l'élément rotatif. Safari pense maintenant que c'est 1000px en face de l'arrière-plan.

    OriginalL'auteur Kit Sunde

  2. 7

    Trouvé une solution. Espérons que cela aide quelqu'un dans le futur.

    Il s'avère qu'il y a un "bug" dans le safari versions de webkit. Lorsqu'un 3d css animation, l'original, le z-index sont perdus. Au lieu de cela, il semble que l'animation de pièces sont mises dans un z-index "groupe" qui est séparé du reste de la z-index de la DOM.

    La solution est de rejoindre la toile de fond de la div et le mur de la div dans le même z-index de groupe en l'enveloppant dans un div avec un webkit-transform ça ne change rien. Qui provoque la toile de fond et la paroi d'être des enfants de la div wrapper et le z-indexation des enfants respectifs sont conservés.

    <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>

    Je crois que c'est la même ou similaire à ceci:

    css z-index perdu après webkit transformer translate3d

    A fonctionné à merveille et semble non-invasive.

    OriginalL'auteur zeroSkillz

  3. 2

    Je suis tombé sur ce problème et rien ne pouvait le fixer jusqu'à ce que j'ai ajouté perspective pour le conteneur parent de l'élément qui doit être derrière.

    .wrap{
perspective: 1000px;
}

    OriginalL'auteur pizza-r0b