Safari for MacOS and iPadOS CSS animation problem

Question

I got a simple animation on my website. Basically an image going from one edge of the screen to the other, flipping and then going back:

#gans {
  padding-top: 9rem;
  position: absolute;
  -webkit-animation: ease-in-out infinite;
  -webkit-animation-name: run;
  -webkit-animation-duration: 15s;
}
@-webkit-keyframes run {
  0% {
    right: 0;
  }
  48% {
    -webkit-transform: rotateY(0deg);
  }
  50% {
    right: calc(100% - 190px);
    -webkit-transform: rotateY(180deg);
  }
  98% {
    -webkit-transform: rotateY(180deg);
  }
  100% {
    right: 0;
     -webkit-transform: rotateY(0deg);
  }
}

It works perfectly on Edge, Firefox, Chrome and even the IOS version of Safari. But on the versions mentioned in the title, the image just vanishes (the div still moves as it’s supposed to) and reappears after flipping back around.

The website can be found under this link

Any suggestions are greatly appreciated

Greetings from Germany

On a different post, someone suggested using backface-visibility or changing the z-index of the element. Both were unsuccessful. But if I change the rotation by + or -1, half of the image appears

Answer 1

It seems to start working properly in Safari 16.3 on MacOS if you add position: relative to <div class="row"> which wraps <div id="gans">...</div>

I don't know the reason for this, but my guess is that Safari on MacOS (don't have an iPad to test) somehow loses the position of the element relative to the document body during the animation. "An element with position: absolute; is positioned relative to the nearest positioned ancestor [...] if an absolute positioned element has no positioned ancestors, it uses the document body [...]" (src). nearest positioned ancestor is the crucial point here. That's why explicitly setting the container position should resolve this.