Why is rotateY (flip) css3 animation flickering in

问题:

I have made a jsFiddle: http://jsfiddle.net/Grezzo/JR2Lu/

When you hit the i key on your keyboard, the picture flips around to show some text, but during the flip animation it flickers (particularly the text flickers) when viewed in Chrome.

(note that I am using -prefix-free JS library so that I don't have to prefix with browser specific CSS properties.)

Why is it flickering and how can I stop it?

UPDATE: Flicker is noticable on Chrome 20.0.1132.47 m running on XP, and whatever the latest version for OS X 10.7.4 Lion is (I'm not near my Mac right now to check)

回答1:

Well, this is a little weird. By removing the background-color from .card, it works OK: http://jsfiddle.net/JR2Lu/3/

Seems that styling .card is the issue, probably as you don't normally see that div.