我有一个合成的div(它有translate3d)与opacity过渡:
#bad {
background-color: red;
-webkit-transition: opacity .5s linear;
-webkit-transform: translate3d(0, 0, 0);
}
如果我改变它的opacity，而过渡正在进行中，它会在Safari闪烁。
这种闪烁大约每三秒发生一次，类似于白色闪光。
Chrome浏览器没有这个问题。
上下滚动，看看我的意思
这个问题似乎并不局限于不透明度变化的-webkit-transform，而它的转换正在进行中，也有类似的效果:偶尔元素呈现在转换的最终状态之一。
如果我删除-webkit-transform，问题就会消失，但不幸的是，这不是一个选项，现在。
我可以通过其他方式在Safari中修复这个问题吗?
问题是改变属性值和添加动画需要同时发生
当用c++重写核心动画时，引入了OSX 10.5中不存在的竞争条件。当我用加法动画做实验时，我发现了同样的闪烁。我发现解决方案是Core Animation的kCAFillModeBackwards。我还发现，通过破解我自己的WebKit分支，同样的解决方法对CSS过渡效果也很有效，重点是破解部分。但是猜想并不能帮助WebKit开发者，我也不想再打扰他们了。我认为问题在于Core Animation，而不是WebKit。我猜他们应该在任何给定的cattransaction中使用相同的CFTimeInterval，该CFTimeInterval来自对caccurrentmediatime的单个调用。
与过渡不同，CSS动画允许填充模式。复制转换行为可能很困难，但这是一种选择。特别是，挑战将是用新的动画替换被打断的动画，这些动画将从上一个动画停止的地方开始。换句话说，从0到1或从1到0的不透明度很容易进行动画，但如果用户想要在当前动画进度为0.577564时开始，会发生什么?这可能需要手动修改@keyframes样式规则，这不是一件容易的事。然后是适当的animation-fill-mode的问题。通常你不会想要使用前向填充动画来执行布局，你会使用CSS属性本身。但在这种情况下，它可能足够简单，不设置底层值，而是只使用前向填充CSS动画，该动画被替换，但在完成后永远不会删除。另一种方法是通过元素设置基础值。样式，同时添加一个向后填充的CSS动画。
当然，如果WebKit不使用核心动画，闪烁也不会发生。到目前为止，防止闪烁的最简单方法是不启用硬件加速。
代替:
-webkit-transform: translate3d(100px, 100px, 0);
试题:
-webkit-transform: translate(100px, 100px);
在我的案例中，我发现有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"函数，不要使用"命令。动画({不透明度:1}ecc..".
这些动作解决了OSX Safari上的闪烁问题。
这似乎是CoreAnimation中的一个bug。
Kevin Doughty在他的博客中提到了它，并提供了一个简单的小提琴来复制它。
我不确定，但我相信这是由一个Core Animation bug引起的rdar://problem/12081774也就是非动画内容的flash。
[…]
我相信Safari转换闪烁与我提交的错误直接相关。解决方法是使用
kCAFillModeBackwards或kCAFillModeBoth的核心动画fillMode。动画计时似乎有问题，在同一事务中，属性值改变和基于该属性开始的动画实际上并不同时开始。向后填充通过将延迟开始动画的效果扩展到实际开始时间之前来解决这个问题。
Kevin也在WebKit中报告了这个#115278，并试图解决它，但据我的理解，他没有继续这个，补丁没有被接受。
当然这不是一个真正的答案(不能解决问题)，但至少它解释了问题。
下面的CSS修复了safari上的过渡闪烁
* {
-webkit-backface-visibility: hidden;
}