Question

我有一个带有translate3d转换的合成div（它有opacity）：

#bad {
    background-color: red;
    -webkit-transition: opacity .5s linear;
    -webkit-transform: translate3d(0, 0, 0);
}

如果我在转换过程中更改其opacity，它将在Safari中闪烁闪烁大约在三秒内发生一次，类似于白色闪光。

Chrome中没有此类问题。

Scroll up and down in this fiddle to see what I mean.

问题似乎并不局限于不透明度变化-webkit-transform，而其过渡正在发生类似的影响：偶尔元素在过渡的最终状态之一中呈现。< /强>

如果我删除-webkit-transform，问题就会消失，但不幸的是，现在不是一个选项我可以通过其他方式在Safari中修复此问题吗？

Answer 1

问题在于改变属性值，添加动画需要同时进行。

当使用C ++重写Core Animation时，引入了OSX 10.5中不存在的竞争条件。当我使用加法动画的实验产生相同的闪烁时，我学到了这一点。我发现解决方法是Core Animation的kCAFillModeBackwards。我还发现同样的解决方法通过破解我自己的WebKit分支对CSS Transitions有效，重点是黑客部分。但猜想并没有帮助WebKit开发者，我不想再惹恼他们。我认为问题出在Core Animation上，而不是WebKit。我猜他们应该在任何给定的CATransaction中使用从CACurrentMediaTime单次调用派生的相同CFTimeInterval。

与过渡不同，CSS动画确实允许填充模式。重现过渡行为可能很困难，但这是一种选择。特别是，挑战将是用新的动画取代中断的动画，这些动画从前一个停止的地方开始。换句话说，从0到1或1到0的不透明度很容易设置动画，但如果用户想要在当前动画进度为0.577564时启动会发生什么？这可能需要手动修改@keyframes样式规则，而不是一项简单的任务。

然后有适当的动画填充模式的问题。通常，您不希望使用前向填充动画执行布局，您将使用CSS属性本身。但在这种情况下，可能很简单，不设置基础值，而只使用前向填充CSS动画，该动画被替换但在完成时从未删除。另一种方法是通过element.style设置基础值，同时添加向后填充CSS动画。

当然，如果WebKit不使用Core Animation，也不会发生闪烁。到目前为止，防止闪烁的最简单方法是不启用硬件加速。

而不是：

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

尝试：

-webkit-transform: translate(100px, 100px);

http://jsfiddle.net/z6ejt/9/

Answer 2

这似乎是CoreAnimation中的一个错误 Kevin Doughty blogged about it并提供a simple fiddle to reproduce it。

我不确定，但我相信它是由核心动画错误引起的 rdar：// problem / 12081774 a.k.a.无动画内容的闪光。

[...]

我相信Safari过渡闪烁与我提交的错误直接相关。解决方法是使用fillMode或kCAFillModeBackwards的核心动画kCAFillModeBoth。似乎动画计时出现了问题，其中属性值发生变化，同一事务中该属性上启动的动画实际上并不同时开始。向后填充通过扩展在其实际开始时间之前应用的后期开始动画的效果来解决此问题。

凯文也将此报告为#115278 in WebKit，并试图解决这个问题，但据我了解，他并没有继续这样做，补丁也没有被接受。

当然，这不是一个真正的答案（并没有解决问题），但至少它解释了这个问题。

Answer 3

在我的案例中，我找到了解决同一问题的3个动作：

我需要在ready事件中淡入图像，尝试使用jQuery动画，但图像在OSX Safari上闪烁。

解决了这些行动：

1）分析CSS并删除应用于图像的所有转换规则，它们似乎与动画命令冲突。

我有这条规则

img {
/*DON'T COPY !!!*/
-webkit-transition:all 0.2s ease-in-out;
-moz-transition:all 0.2s ease-in-out;
-ms-transition:all 0.2s ease-in-out;
-o-transition:all 0.2s ease-in-out;
transition:all 0.2s ease-in-out;
/*DON'T COPY !!!*/
}

我删除了它。

2）将此CSS规则添加到您需要淡入的元素中：

display: none;/*initial state modified by the fadeIn function*/
-webkit-backface-visibility: hidden;
-webkit-perspective: 1000;
-webkit-font-smoothing: antialiased;
-webkit-transform-style: preserve-3d;
-webkit-transform: translateZ(0);

3）使用jQuery函数“fadeIn”，不要使用命令“.animate（{opacity：1} ecc ..”。

这些操作解决了OSX Safari上的闪烁问题。

Answer 4

以下CSS修复了Safari浏览器上的过渡闪烁

* {
-webkit-backface-visibility: hidden;
}

转换期间的不透明度变化在Safari中闪烁

4 个答案: