Bug in transizione CSS3 ruotateY su Safari?

Question

Sto visualizzando un popup modale utilizzando le transizioni CSS3 (ampiamente preso in prestito da Effeckt.css). Funziona bene con tutti i browser moderni eccetto Safari. In Safari, il movimento è OK, ma il colore di sfondo scatta in modo non uniforme.

Questo è il codice, il problema è visibile in Safari su OSX: http://jsfiddle.net/eJsZx/4/

Una schermata del problema prima che si risolve. Puoi vedere che metà del div è correttamente colorato di bianco, metà è ancora trasparente.

Questa è la parte rilevante del CSS (.effeckt-show e .md-effect-8 vengono applicate quando il pulsante viene premuto, per mostrare la modale):

.effeckt-modal { 
    visibility: hidden; 
    -webkit-backface-visibility: hidden; 
    -ms-backface-visibility: hidden; 
    -o-backface-visibility: hidden; 
    backface-visibility: hidden; 
    background: white; 
} 
.md-effect-8 { 
    -webkit-perspective: 1300px; 
    -ms-perspective: 1300px; 
    -o-perspective: 1300px; 
    perspective: 1300px; 
    -webkit-transform-style: preserve-3d; 
    -ms-transform-style: preserve-3d; 
    -o-transform-style: preserve-3d; 
    transform-style: preserve-3d; 
} 
.md-effect-8 .effeckt-modal { 
    -webkit-transform: rotateY(-70deg); 
    -ms-transform: rotateY(-70deg); 
    -o-transform: rotateY(-70deg); 
    transform: rotateY(-70deg); 
    -webkit-transition: all 500ms; 
    -o-transition: all 500ms; 
    transition: all 500ms; 
    opacity: 0; 
} 
.effeckt-show.md-effect-8 .effeckt-modal { 
    -webkit-transform: rotateY(0deg); 
    -ms-transform: rotateY(0deg); 
    -o-transform: rotateY(0deg); 
    transform: rotateY(0deg); 
    opacity: 1; 
} 

Answer 1

Per quanto mi riguarda posso dire che è un bug, sì, Safari sta rendendo l'intersezione dove non dovrebbe.

Da qualche tempo I thought Safari is doing it right rendendo sempre all'incrocio di elementi, ma per quanto ho capito the specs, solo gli elementi nella stessa 3d rendering context dovrebbe intersecano, e che sarebbe figli di elementi con un transform-style di preserve-3d.

Finora l'unica soluzione alternativa che ho trovato (testata solo su Windows ma in cui Safari mostra lo stesso comportamento) consiste nel tradurre gli elementi sottostanti sull'asse z. Senza la prospettiva applicata, in realtà non si tradurrà, ma Safari/Webkit sembra pensarlo (probabilmente perché considera l'elemento come erroneamente nello stesso contesto di rendering 3d della finestra di dialogo effettivamente trasformata) e quindi gli elementi non si intersecano più.

.effeckt-overlay { 
    position: fixed; 
    width: 100%; 
    height: 100%; 
    visibility: hidden; 
    top: 0; 
    left: 0; 
    opacity: 0; 
    -webkit-transition: 500ms; 
    -o-transition: 500ms; 
    transition: 500ms; 
    z-index: 1000; 
    background: rgba(0, 0, 0, 0.5); 

    -webkit-transform: translateZ(-1000px); 
} 

http://jsfiddle.net/eJsZx/5/