9

此问题在 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 2011 年中）上的 Safari 版本 6.0.2 (7536.26.17) 不受此错误的影响
4

1 回答 1

6

有几种不同的方法可以尝试减少闪烁。然而，最大的问题是它们似乎是“命中注定”。所以你必须尝试一些，看看哪一个有助于解决问题。

但它们围绕着同样的几件事：

-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。

于 2013-03-07T19:29:11.593 回答