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

Have you found any solution for that? I also faced this issue recently and I can't figure it out. — Andrzej Czerwoniec, Apr 11 '22 at 06:29
I managed to avoid this issue by reducing the size of my animated content. Likely related to [this answer](https://stackoverflow.com/a/15759785/2612679) — Devin Spikowski, Aug 04 '23 at 17:15

score 0 · Answer 1 · answered Apr 11 '22 at 18:50

0

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

answered Apr 11 '22 at 18:50

beebopnaa

11

Please provide an example with working code if possible and explain why your solution works. Some kind of codepen or fiddle or the built-in SO sandbox, is preferred as well. Basically, if your solution works, then sandbox it, and explain. https://stackoverflow.com/help/how-to-answer – Brian Patterson Apr 15 '22 at 04:38

Safari infinite translateX animation flickers on loop

1 Answers1