Css Animation Functional on Chrome but not Safari - html

Question

I recently found a flying bird animation that I have been attempting to implement into one of my recent projects. I have attempted to reciprocate the same exact animation, yet the animation appears to be broken on safari browsers (both mobile and desktop). I am approximately 95% certain that most of my css is correct, and that every property that requires it, has the -webkit prefix for safari.
With all that said, I have provided below a link to a Codepen that contains my exact code for the animation. As I mentioned before, if you open up the animation on Google Chrome, it works perfectly fine. Yet, when it is opened up on Safari, the animation acts completely different. Here are the primary issues I am noticing:
The 'Flying' animation appears to not be scrolling the bird background image properly(as this animation is meant to act like a flip book), which results in a previous frame of the bird appearing.
On Chrome, when the window is resized, the birds flight path adjusts to the width of the window, as I set the 'fly-across-1' animation (uses the transform property) to be responsive to the view window width. However, when you resize (try expanding the window) a safari window, the birds 'flight' does not reach the end of the window.
Not sure if any of this makes sense, but I have completely run out of mental capacity trying to adjust for the issues myself. If anyone has any idea what I am missing or has any suggestions, I would greatly appreciate the help. Thanks again.
Here is the Codepen
For reference, here is the css code:
.container {
position: relative;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
min-height: 35rem;
}
.bird-box {
position: absolute;
top: 20%;
left: -10%;
transform: translateX(-10vw);
-webkit-transform: translateX(-10vw);
will-change: transform;
}
.bird-box-one {
animation: fly-across-1 7s linear infinite;
-webkit-animation: fly-across-1 7s linear infinite;
}
.bird {
background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/174479/bird-cells-new.svg);
background-size: auto 100%;
width: 22px;
height: 31.25px;
will-change: background-position;
animation: flying;
-webkit-animation: flying;
animation-timing-function: steps(10);
-webkit-animation-timing-function: steps(10);
animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;
}
.bird-one {
animation-duration: 1.3s;
-webkit-animation-duration: 1.3s;
animation-delay: -0.5s;
-webkit-animation-delay: -0.5s;
}
#keyframes flying {
100% {
background-position: -900px 0;
}
}
#-webkit-keyframes flying {
0% {
background-position: 0 0;
}
100% {
background-position: -900px 0;
}
}
#keyframes fly-across-1 {
0% {
transform: translateX(-10vw);
-webkit-transform: translateX(-10vw);
}
10% {
transform: translateY(-2vh) translateX(10vw);
-webkit-transform: translateY(-2vh) translateX(10vw);
}
20% {
transform: translateY(-4vh) translateX(30vw);
-webkit-transform: translateY(-4vh) translateX(30vw);
}
30% {
transform: translateY(-6vh) translateX(50vw);
-webkit-transform: translateY(-6vh) translateX(50vw);
}
40% {
transform: translateY(-5vh) translateX(70vw);
-webkit-transform: translateY(-5vh) translateX(70vw);
}
50% {
transform: translateY(-3vh) translateX(90vw);
-webkit-transform: translateY(-3vh) translateX(90vw);
}
60% {
transform: translateY(-2vh) translateX(110vw);
-webkit-transform: translateY(-2vh) translateX(110vw);
}
100% {
transform: translateY(0) translateX(110vw);
-webkit-transform: translateY(0) translateX(110vw);
}
}
#-webkit-keyframes fly-across-1 {
0% {
transform: translateX(-10vw);
-webkit-transform: translateX(-10vw);
}
10% {
transform: translateY(-2vh) translateX(10vw);
-webkit-transform: translateY(-2vh) translateX(10vw);
}
20% {
transform: translateY(-4vh) translateX(30vw);
-webkit-transform: translateY(-4vh) translateX(30vw);
}
30% {
transform: translateY(-6vh) translateX(50vw);
-webkit-transform: translateY(-6vh) translateX(50vw);
}
40% {
transform: translateY(-5vh) translateX(70vw);
-webkit-transform: translateY(-5vh) translateX(70vw);
}
50% {
transform: translateY(-3vh) translateX(90vw);
-webkit-transform: translateY(-3vh) translateX(90vw);
}
60% {
transform: translateY(-2vh) translateX(110vw);
-webkit-transform: translateY(-2vh) translateX(110vw);
}
100% {
transform: translateY(0) translateX(110vw);
-webkit-transform: translateY(0) translateX(110vw);
}
}