Flickering back-face visibility when 'flipping' a box using back-face visibility

Question

I'm using a reasonably simple CSS transition to create a box that 'flips around' by transitioning two divs 180deg at the same time. When you're on the 'back' of the box, it should be slightly transparent so you can see the underside.

I've got this working fairly easily in all browers, except the latest Safari 7 and on iOS 7. On Safari 7, the animation flickers and the back card just 'pops' to the front at the end of the animation.

This seems to be a bug in the rendering of the animation on newer Safari. Is there a workaround to get this to behave better?

Check out gifs of the animation on Chrome and Safari

See a demo here http://cssdeck.com/labs/flippable-card

Answer 1

Can not test on safari, but a similar bug happened time ago in Chrome.

The solution in that case would have been to move the back 1px in z

.card__back { 
    transform: rotateY(180deg) translateZ(1px); 
    backface-visibility: hidden; 
} 

.card--flipped .card__back {
    transform: rotateY(0deg) translateZ(1px); 
}

This happened in Chrome because while animating, the spatial order was calculated (I mean, the position of elements in 3d space), and it overrides other factors.

Once the animation is over, that calculation system is no longer used.

As I said before; cann't test in Safari, so I can be sure that this is a solution.