Safari infinite translateX animation flickers on loop

Question

I have this code

.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;
    }
  }
}

which should loop seamlessly creating a continuous wave motion. Unfortunately, in safari, it flickers on every loop. I have tried all the -webkit stuff and -webkit-backface-visibility: hidden, but no luck

If I remove transform: translateX(...) and animate left instead, the flickering disappears, but I want to use transform for perfomance reasons

I have created this simple example here

You can see the flicker on every loop (3s) in safari. Works fine in chrome

Answer 1

Adding -webkit-transform: translateZ(0); to img or picture element will do the trick