CSS3在OSX上的Safari 6中闪烁(但这不是闪烁到白色的问题!)

Question

此问题在iOS或Chrome上不存在,因此它不是与Webkit相关的问题.它似乎特定于OS X 10.8.2上的最新Safari 6.0.2(而不是由Safari 6.0.3附带的10.8.3预览版本12D65修复).我将很快用Safari 6.0.2测试Lion 10.7.5,并且还将在预览版本12D68上进行测试.

http://jsfiddle.net/zrr2b/

这是一个小问题,使问题非常明显.如果你有一台运行ML的Mac,你会发现Chrome和Safari之间存在显着差异,当你移动鼠标时,Safari会闪烁很多.

基本上问题是Safari将间歇性地从JS为单帧绘制目标变换,然后继续过渡动画.这会导致闪烁,但前提是转换处于开始的某个位置.因此,对于CSS3过渡的大多数(非密集使用),错误不会使其丑陋的头部,但如果功能或视觉效果依赖于它平滑地插入到目标(就像我当前的项目那样),这种闪烁是不愉快的.

我已经看过有关闪烁类似的主题和应用非常的风格,以抵消抖动,如所有组合-webkit-backface-visibility: hidden,迫使各父元素获得硬件加速-webkit-transform-style: preserve-3d, -webkit-perspective: 1000以及没有人遗憾的是做任何事情来解决这个特定的Safari浏览器的问题闪烁,即闪烁不是白色或空白,而是闪烁到单个帧的目标变换.

在这个分支中你可以看到我设置了一堆样式,有助于"常规闪烁",但对我没有任何影响.http://jsfiddle.net/zrr2b/1/

由于这不是webkit特定的问题,我不确定在哪里发布错误报告.因为我认为这是一个相当大的问题,所以在10.8.3发布之前得到它会特别好.请记住,这是我们依赖HTML5做的事情,以便它真正杀死Flash.

更新:

• Mountain Lion 10.8.3 12D68(Retina Macbook Pro 15.4")上的Safari版本6.0.3(8536.28.10)仍然存在此问题
• Windows上的Safari(5.1.7)不会遇到此错误
• 在Lion 10.7.5(Macbook Air Mid 2011)上的Safari版本6.0.2(7536.26.17)没有遭受此错误

Answer 1

有几种不同的方法可以尝试减少闪烁.然而,最重要的问题是它们似乎是"被击中和错过".所以你必须尝试一些,看看哪一个有助于解决问题.

但他们围绕着同样的事情:

-webkit-transform: translateZ(0);  /* triggers GPU, sometimes fixes the issue */
transform: translateZ(0);  /* non-webkit specific */

如果这不成功,请尝试:

-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-perspective: 1000;
perspective: 1000;

如果这也失败了,试试这个:

-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);

您可以通过W3C了解每一个.但是他们在不同情况下都为我工作,没有流畅的动画,闪烁的动画,包括一些非常奇怪的动画,比你的小提琴更多的跳跃.

他们会进入动画的div.