CSS3 rotating flip card - flickering?

Question

See the grey box on this page: http://goo.gl/fL973

When you hover it it's suppose to flip over and show the other side. It works in Chrome, but for some reason i'm getting a lot of flickering during the animation. I tried fiddling around with the rules and even adding a container around the box, but no success.

I read this question, among others: Why is rotateY (flip) css3 animation flickering in Chrome?

The problem seems to be that elements with backface-visibility: hidden; cannot have backgrounds. So, as a workaround, i thought i could have an element inside .front and .back and give that element a background. That didn't work, still flickered.

Other than that, i'm also not sure why it only works in Chrome/webkit. I do have the necessary prefixes for everything, so it should work, shouldn't it?

Any suggestions?

Answer 1

Works fine after moving the backface-visibility: hidden; to the .front and .back instead of .card. The flickering disappeared. Now i'll just have to come up with some fallback for non supporting browsers.