为什么rotateY（翻转）css3动画在Chrome中闪烁？ [英] Why is rotateY (flip) css3 animation flickering in Chrome?

问题描述

我做了一个jsFiddle： http://jsfiddle.net/Grezzo/JR2Lu/

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

当您点击键盘上的i键时，图片会翻转以显示一些文本，但在翻转动画期间，在Chrome中查看时会闪烁。

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.

（请注意，我使用的是不含-prefix的JS库，因此我不必使用浏览器特定的CSS属性作为前缀。）

(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?

更新：闪烁是显而易见的Chrome 20.0.1132.47 m运行在XP，和任何最新版本的OS X 10.7.4 Lion是（我现在不在我的Mac附近检查）

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)

推荐答案

好吧，这有点怪异。通过从 .card 中删除​​ background-color ，它可以正常运行： http://jsfiddle.net/JR2Lu/3/

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

似乎样式 .card 是问题，可能是因为你通常看不到div。

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

这篇关于为什么rotateY（翻转）css3动画在Chrome中闪烁？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！