safari - Safari 中过渡期间的不透明度变化闪烁

Question

我有一个复合 div(它有 translate3d)和一个 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 开发人员没有帮助，我不想再惹恼他们。我确实认为问题在于核心动画，而不是 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/