safari css3 rotate,css - Bug in CSS3 rotateY transition on Safari? - Stack Overflow

I am showing a modal popup using CSS3 transitions (largely borrowed from Effeckt.css). It works well in all modern browsers except Safari. In Safari, the movement is OK, but the background-color snaps in unevenly.

This is the code, the problem is visible in Safari on OSX: http://jsfiddle.net/eJsZx/4/

A screenshot of the problem before it resolves itself. You can see that half the div is correctly colored white, half is still transparent.

This is the relevant part of the CSS (.effeckt-show and .md-effect-8 are applied when the button is clicked, to show the modal):

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

}