CSS3在OSX上的Safari 6中出现闪烁问题（但这不是变白闪烁问题！）

Question

这个问题在iOS和Chrome上没有出现，因此它不是与Webkit有关的问题。似乎只在最新的Safari 6.0.2中存在于OS X 10.8.2（而且在附带Safari 6.0.3的10.8.3预览版本12D65中未得到修复）。我很快就会在Lion 10.7.5上测试Safari 6.0.2，并且还将在预览版本12D68上进行测试。

http://jsfiddle.net/zrr2b/

这里有一个演示，可以让问题变得非常明显。如果你有一台运行ML的Mac电脑，你应该会看到Chrome和Safari之间有很大的区别，其中Safari会在你移动鼠标时闪烁很多次。

问题基本上是Safari会间歇性地绘制从JS设置的目标变换，然后继续过渡动画。这会导致闪烁，但仅当过渡本来正在某个地方进行时才会发生。因此，对于大多数（非密集使用）CSS3转换，这个bug不会出现，但是如果功能或视觉效果取决于平滑地插值到目标（如我的当前项目），这个闪烁就不令人愉快。

我已经查看了与闪烁相关的类似主题，并应用了几乎所有组合的样式来对抗闪烁，例如-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上，Safari Version 6.0.3 (8536.28.10)（Retina Macbook Pro 15.4"）仍然存在这个问题。
• Windows上的Safari（5.1.7）没有出现这个错误。
• Lion 10.7.5上的Safari版本6.0.2 (7536.26.17)（Macbook Air Mid 2011）没有出现这个问题。

- Steven Lu

---

仍然存在一个错误，现在在OS X Mavericks上的Safari 9.0.2中。 - JustGoscha

我在使用OS X El Capitan，Safari 9.0.2。现在无法再现。有趣。 - Steven Lu

如果我没记错的话，不良行为是看到方块来回扭曲。预期行为是平稳滞后的位置动画。我想我也将我妈妈的 MBA 升级到了 El Cap。:-/ - Steven Lu

也许是时候升级了，但同样的Safari在不同版本的OSX上表现不一致还是很奇怪的。 - JustGoscha

一个运行在10.10.4上的Safari 8.0.7确实会出现这个问题。我不确定为什么，但是这台电脑没有可用的Safari 9软件升级。我真的不知道你是如何在Mavericks上安装了9.0.2的。你是手动安装的吗？ - Steven Lu

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了解每一个动画效果。但是它们在不流畅的动画，闪烁的动画以及一些非常奇怪的动画上都对我产生了作用，这些动画比您的fiddle要抖动得多。

它们将放置在正在进行动画的div内。

- Mauricio