Why is rotateY (flip) css3 animation flickering in Chrome?

纵饮孤独 提交于 2019-12-06 01:02:29

问题


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.



来源:https://stackoverflow.com/questions/11296028/why-is-rotatey-flip-css3-animation-flickering-in-chrome

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!