Webkit-Transformation bricht z-index auf Safari

Question

Problem

Ich versuche, eine Schicht erscheinen zu lassen, wie es eine Wand ist unten fallen, dahinter die Schicht enthüllt. Ich habe zwei feste Div-Positionen eingerichtet. Das "Wall" -Div hat einen Z-Index von 9999, das "Background" -Div hat einen Z-Index von 0;

In Webkit Browsern (Safari/IOS), die ich getestet habe, scheint es so, als würden die Z-Indizes nach dem Start der Animation auf der "Wand" verloren gehen oder ignoriert werden, wodurch die "Wand" -Schicht abrupt verschwindet der Hintergrund div.

Haben Sie Ideen, wie Sie die Z-Indizes der Schichten erhalten können? Danke im Voraus!

Beispielcode (Anmerkung: jsFiddle am Boden)

HTML-Code

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

Einige Javascript, um die Schaltfläche aktivieren

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

CSS-Code (von animate.css cribbed)

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

Überprüfen Sie die Unterschiede in Safari vs Chrome heraus.

Answer 1

Eine Lösung gefunden. Hoffentlich hilft das jemandem in der Zukunft.

Es stellt sich heraus, dass es in den Safari-Versionen von Webkit einen "Bug" gibt. Wenn eine 3D-CSS-Animation abgespielt wird, gehen die ursprünglichen Z-Indizes verloren. Stattdessen werden die animierenden Teile in eine separate Z-Index- "Gruppe" eingefügt, die von den übrigen Z-Indizes des DOM getrennt ist.

Die Lösung besteht darin, das Backdrop-Div und das Wall-Div in dieselbe Z-Index-Gruppe zu fügen, indem Sie es in ein Div mit einer Webkit-Transformation einfügen, die nichts ändert. Das bewirkt, dass der Hintergrund und die Wand Kinder des Wrapper-Divs sind und die Z-Indizierung der jeweiligen Kinder erhalten bleibt.

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

Ich glaube, es ist die gleiche oder eine ähnliche Frage zu diesem:

css z-index lost after webkit transform translate3d

Answer 2

Mein Drehelement nicht geeignet war, einen Nachbarn im Hintergrund zu haben, aber ich regelte es durch

Anwendung

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

zum übergeordneten Element des rotierenden Elements. Safari denkt jetzt, dass es 1000px vor dem Hintergrund ist.

Answer 3

Ich stieß auf dieses Problem und nichts würde es beheben, bis ich Perspektive auf den übergeordneten Container des Elements hinzugefügt, die dahinter sein sollte.

.wrap{ 
    perspective: 1000px; 
}