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

Question

我有一个translate3d带有opacity转换的合成div(它有):

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

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

Chrome中没有此类问题.

在这个小提琴中上下滚动,看看我的意思.

问题似乎并不局限于不透明度变化,-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/