CSS Animation Behaving Differently on Safari / All iPhone Browsers

Question

I've been stuck on this problem for 3 days and have scoured the Internet for a solution, but haven't been able to find one that works yet.

I have an animation of a cartoon rocket flying across a screen. The rocket has 4 chained keyframe animations applied to it:

1.) "launch" moves the rocket from off the left side of the screen, across to the right
2.) "rightself" rotates the rocket so it's pointing up
3.) "descend" moves the rocket down towards a planet
4.) "shrink" makes the rocket smaller as it approaches the planet's surface

I can't add a video here, but here are links to how it should and shouldn't look:

How it should look:
https://twitter.com/planet_katie/status/1415739110505996291

How it's glitching on all iOS browsers and desktop Safari:
https://twitter.com/planet_katie/status/1418312787906998275

Game Link, if you want to try yourself:
http://www.codeeverydamnday.com/projects/rocketblaster/index.html

The rocket animation runs smoothly on desktop Chrome and Firefox, but glitches in Safari. It also runs smoothly on Android phones, but again glitches on every browser I've tried on an iPhone. The iPhone emulator in Chrome's dev tools shows it running smoothly as well, so I'm not sure why it's not translating to the iPhone itself.

Things I have tried:

• Changing my svg images to png's, as I read that sometimes svg's behave unexpectedly
• Added all of the proper -webkit- prefixes
• Condensing the 4 animations into 1
• Using the longhand format when adding my CSS animation on my element (animation-name, animation-duration, animation-iteration-count, etc) instead of the shorthand format
• Including both the 0% and 100% keyframes for each animation
• Adding a 0.01 second delay to the first animation (read somewhere that this helped someone else)

So far, no luck. Anyone able to take a look at my code and see if I'm missing anything? Note: I have removed the -moz-, -ms- and -o- prefixes for brevity, but they are in my code as well.

#rocketfire {
  background-color: red;
  position: absolute;
  top: 100px;
  left: -320px;
  height: 200px;
  -webkit-animation: launch 4s ease-in-out 0.01s 1 forwards,
    rightself 2s ease-in-out 3.5s 1 forwards,
    shrink 3.5s ease-in-out 4s 1 forwards, descend 4s ease-in-out 5s 1 forwards;
  animation: launch 4s ease-in-out 1 forwards,
    rightself 2s ease-in-out 3.5s 1 forwards,
    shrink 3.5s ease-in-out 4s 1 forwards, descend 4s ease-in-out 5s 1 forwards;
}

@-webkit-keyframes launch {
  0% {
    -webkit-transform: translateX(-0px);
  }
  100% {
    -webkit-transform: translateX(1050px);
  }
}

@keyframes launch {
  0% {
    transform: translateX(-320px);
  }
  100% {
    transform: translateX(1050px);
  }
}

@-webkit-keyframes rightself {
  0% {
    -webkit-transform: translateX(1050px) rotate(0deg);
  }
  100% {
    -webkit-transform: translateX(1050px) rotate(-82deg);
  }
}

@keyframes rightself {
  100% {
    transform: translateX(1050px) rotate(-82deg);
  }
}

@-webkit-keyframes descend {
  0% {
    -webkit-top: 0px;
  }
  100% {
    -webkit-top: 270px;
  }
}

@keyframes descend {
  100% {
    top: 270px;
  }
}

@-webkit-keyframes shrink {
  0% {
    -webkit-transform: translateX(1050px) rotate(-82deg) scale(1);
  }
  100% {
    -webkit-transform: translateX(1050px) rotate(-82deg) scale(0.5);
  }
}

@keyframes shrink {
  100% {
    transform: translateX(1050px) rotate(-82deg) scale(0.5);
  }
}

<img id="rocketfire" src="images/rocketfireright.png" />

Answer 1

What ultimately worked for me was combining the four animations into one, like this:

@keyframes launch {
  30% {transform: translateX(1050px) rotate(0);}
  50% {transform: translateX(1050px) scale(1) rotate(-82deg); top: 100px;}
  80% {transform: translateX(1050px) scale(0.5) rotate(-82deg);}
  100% {transform: translateX(1050px) scale(0.5) rotate(-82deg); top: 270px;}
}

Seems like Safari had a problem trying to run multiple keyframes animations at once.

Answer 2

I think you shouldn’t need the -webkit versions of the animations, so removing those will make the CSS easier to debug. I found a couple of inconsistencies and missing values. Cleaned up, the CSS looks like the following:

#rocketfire {
  background-color: red;
  position: absolute;
  top: 100px;
  left: -320px;
  height: 200px;
  animation: launch 4s ease-in-out 1 forwards,
             rightself 2s ease-in-out 3.5s 1 forwards,
             shrink 3.5s ease-in-out 4s 1 forwards,
             descend 4s ease-in-out 5s 1 forwards;
}

@keyframes launch {
  0% {
    transform: translateX(-320px);
  }
  100% {
    transform: translateX(1050px);
  }
}

@keyframes rightself {
  0% {
    transform: translateX(1050px) rotate(0deg);
  }
  100% {
    transform: translateX(1050px) rotate(-82deg);
  }
}

@keyframes descend {
  0% {
    top: 0px;
  }
  100% {
    top: 270px;
  }
}

@keyframes shrink {
  0% {
    transform: translateX(1050px) rotate(-82deg) scale(1);
  }
  100% {
    transform: translateX(1050px) rotate(-82deg) scale(0.5);
  }
}

Try that and see if it fixes it!