iOS 13 及更低版本 CSS 动画闪烁答案

【问题标题】：iOS 13 and lower CSS Animation BlinkiOS 13 及更低版本 CSS 动画闪烁
【发布时间】：2021-03-07 21:59:41
【问题描述】：

当多个 CSS 旋转关键帧动画相互叠加时，一些图层会“闪烁”，如以下 Codepen 示例所示：https://codepen.io/JoshuaVB/full/bGevLbR。

@keyframes waves{
  0%{
    transform: rotate(0deg);
  }
  100%{
    transform: rotate(360deg);
  }
}

这个问题似乎只发生在 iOS 13 及更低版本上。它有时可以在 iOS 13 模拟器上运行，但在 iOS 12 及更低版本上无法长期运行。它适用于所有其他浏览器和设备。

单独渲染图层时，闪烁似乎减少了。然而，每增加一层似乎都会给最终产品增加更多的不稳定性/“闪烁”。

【问题讨论】：

【解决方案1】：

我发现了这个here。我没有测试过

-webkit-backface-visibility: hidden;

【讨论】：