Safari 无限translateX 动画循环闪烁

Question

我有这个代码

.wave {
  position: absolute;
  height: 90vh;
  width: 1920px * 2;
  background-image: url(...);
  background-size: 1920px 100%;
  background-repeat: repeat-x;
  animation: wave 3s linear infinite;
  @keyframes wave {
    0% {
      transform: translateX(0);
      // left: 0;
    }
    100% {
      transform: translateX(-1920px);
      // left: -1920px;
    }
  }
}

它应该无缝循环，创建连续的波浪运动。不幸的是，在 safari 中，它在每次循环时都会闪烁。我已经尝试了所有的-webkit东西-webkit-backface-visibility: hidden，但没有运气

如果我删除transform: translateX(...)并left设置动画，闪烁就会消失，但transform出于性能原因我想使用

我在这里创建了这个简单的例子

您可以在 safari 中看到每个循环（3 秒）的闪烁。在镀铬下工作得很好

Answer 1

添加-webkit-transform: translateZ(0);到 img 或图片元素就可以了