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)
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.
来源:https://stackoverflow.com/questions/11296028/why-is-rotatey-flip-css3-animation-flickering-in-chrome