8

编辑:@Archer 的答案似乎解决了这个问题。(请投票给他,因为我没有足够的积分来做这件事)。
要了解有关该错误的更多信息,请单击此处: http: //www.viget.com/inspire/webkit-transform-kill-the-flash/


我的问题不容易解释。我在 jsfiddle 上编写了一个测试用例。您可以在本文底部找到链接。

在单击演示链接之前,请注意以下事项:

确保您使用的是谷歌浏览器。(因为 CSS 中的 -webkit 前缀)。

第一次单击橙色按钮时请注意。在动画开始之前,您应该会看到一种短暂的闪光。当您再次尝试时(单击重置按钮后)一切正常,没有闪烁的屏幕。但是,如果您清除浏览器缓存 (CTRL-SHIFT-DEL),关闭浏览器,然后重新加载页面,就会再次出现问题。
我希望我解释清楚。

演示:http: //jsfiddle.net/NKQNX/14/

(对不起我的拼写,英语不是我的第一语言)

4

2 回答 2

12

显然,这是 webkit 动画的一个已知问题。有点谷歌搜索想出了这个......

body {
    -webkit-transform: translate3d(0, 0, 0);
}

我在您的示例中将其添加到 css 中并尝试了大约 10 次,但一次都没有闪烁,而我之前能够始终如一地获得它。

http://jsfiddle.net/NKQNX/16/

于 2012-03-05T17:48:00.813 回答
0

我在较旧的 Chrome 版本中看到过很多次,但最近几周它已得到修复。我正在运行 Chrome 19,并且不再看到这些闪烁。

我认为它发生在 3d 变换动画时。正如 Archer 指出的那样,通过强制进行 3d 转换可以避免这种情况,因为页面已经在图形卡上呈现。

于 2012-03-05T19:45:10.500 回答