Fehler in CSS3 rotateY Übergang auf Safari?

Question

Ich zeige ein modales Popup mit CSS3-Übergängen (weitgehend entlehnt von Effeckt.css). Es funktioniert gut in allen modernen Browsern außer Safari. In Safari ist die Bewegung in Ordnung, aber die Hintergrundfarbe rastet ungleichmäßig ein.

Dies ist der Code, das Problem in Safari auf OSX sichtbar: http://jsfiddle.net/eJsZx/4/

Ein Screenshot des Problems, bevor es löst sich auf. Sie können sehen, dass die Hälfte der Div korrekt weiß ist, die Hälfte ist immer noch transparent.

Dies ist der relevante Teil des CSS (.effeckt-show und .md-effect-8 werden angewendet, wenn die Schaltfläche geklickt wird, das modal anzuzeigen):

.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

Soweit ich ein es sagen kann, Bug, ja, Safari gibt Schnittpunkt, wo es nicht sollte.

Seit einiger Zeit I thought Safari is doing it right durch immer von Elementen Rendering-Kreuzung, aber so weit ich the specs verstehen, sollten nur Elemente in den gleichen 3d rendering context schneiden, und das würde Kinder von Elementen mit einem transform-style von preserve-3d sein.

Bisher war die einzige Problemumgehung, die ich fand (nur unter Windows getestet, wo Safari das gleiche Verhalten zeigt), die zugrunde liegenden Elemente auf der z-Achse zu verschieben. Wenn die Perspektive nicht angewendet wird, wird sie nicht übersetzt, aber Safari/Webkit scheint dies zu glauben (was wahrscheinlich daran liegt, dass das Element irrtümlicherweise so behandelt wird, als befände es sich im selben 3D-Rendering-Kontext wie der tatsächlich transformierte Dialog) nicht mehr schneiden.

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