OSX 上 Safari 6 中的 CSS3 闪烁（但这不是闪烁到白色的问题！）

Posted 2023-03-06

【中文标题】OSX 上 Safari 6 中的 CSS3 闪烁（但这不是闪烁到白色的问题！）

【英文标题】：CSS3 Flickering in Safari 6 on OSX (but this is not the flickering-to-white issue!)

【发布时间】：2013-02-01 14:32:03

【问题描述】：

此问题在 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 (5.1.7) 上的 Safari 不受此错误的影响 Lion 10.7.5（Macbook Air Mid 2011）上的 Safari 版本 6.0.2 (7536.26.17) 没有此错误

【问题讨论】：

投了赞成票！看起来我不是唯一一个看到这个问题的人。谢谢。我确实在 bugreport.apple.com 提交了一个错误。

不过，现在在 OS X Mavericks 上的 Safar 9.0.2 上存在一个错误

我使用的是 OS X El Capitan，Safari 9.0.2。不再重现。很有趣。

真的吗？您是否尝试过在 jsfiddle 中快速移动鼠标。我所说的非常快是指在动画完成之前。 （等等，愚蠢的问题，你是问题的作者）

是的，iirc 的不良行为是看到块来回弯曲。预期行为是平滑滞后的位置动画。我想我也把我妈妈的 MBA 升级到了 El Cap :-/

【参考方案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。