Backface visibility broken in Chrome (certain platforms/versions)

Question

So I\'ve looked around a bit, it seems that -webkit-backface-visibility functionality is a bit spotty. In Chrome 18 on Mac and Linux, it works fine. In Chrome 1

Answer 1

I found quite elegant workaround using transition-delay on the opacity to hide it middleway throught the animation.

http://jsfiddle.net/TeXTQ/

div {
    -webkit-transition-property: -webkit-transform, opacity;
    -webkit-transition-duration:2s, 0;
    -webkit-transition-timing-function:ease-in-out,ease-in-out;
    -webkit-transition-delay:0,1s;
}
div:hover {
    -webkit-transform: rotateX(-180deg) rotateY(0deg);
    opacity:0;
}