我有一个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 中解决此问题吗？
问题是更改属性值和添加动画需要同时发生。
当用 C++ 重写 Core Animation 时，引入了 OSX 10.5 中不存在的竞争条件。当我对附加动画的实验产生相同的闪烁时，我了解到了这一点。我发现解决方法是 Core Animation 的 kCAFillModeBackwards。我还发现相同的解决方法对 CSS 转换很有效，方法是破解我自己的 WebKit 分支，重点是破解部分。但是猜想对 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);
就我而言，我发现了 3 个解决相同问题的操作：
我需要在准备好的事件中淡入图像，尝试使用 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 上的闪烁问题。
这似乎是 CoreAnimation 中的一个错误。
Kevin Doughty写了一篇关于它的博客，并提供了一个简单的小提琴来重现它。
我不确定，但我相信它是由核心动画错误rdar://problem/12081774又名非动画内容的闪光引起的。
[...]
我相信 Safari 过渡闪烁与我提交的错误直接相关。解决方法是使用or的核心动画
fillMode。动画计时似乎有问题，其中属性值更改和动画在同一事务中在该属性上开始实际上并没有同时开始。向后填充通过扩展延迟开始动画的效果来解决这个问题，以便在其实际开始时间之前应用。kCAFillModeBackwardskCAFillModeBoth
Kevin 还在WebKit 中将此报告为 #115278并试图解决它，但据我了解，他没有继续这样做，补丁也未被接受。
当然这不是一个真正的答案（不能解决问题），但至少它解释了问题。
以下 CSS 修复了 safari 上的过渡闪烁
* {
-webkit-backface-visibility: hidden;
}