CSS keyframes animation works on Chrome desktop but not mobile? - html

Question

I'm using a keyframes animation for a transformation. It works perfectly on desktop, but it acts extremely strange on mobile. I'm testing on Chrome on my Macbook and on Chrome on my iPhone X. Another user found the same issue on Safari on iPhone.
Basically, when the page loads, the animation doesn't play. The delay works, but the actual transition and fade doesn't happen. You can see what it should look like (from a computer) at asilhavy.com. It doesn't play on load, but if I go to a new page and select the back button, it will play after I scroll. So weird. The scroll bar is also weird when I go back after visiting a new page.
I'm suspicious that it might be something very wrong somewhere else in my code, but I don't know where. Any pointers on where to look are helpful. The full code is available at the link above, but here's the code I have now specifically for that animation. I've gone through a few other solutions, like setting display: block, using -webkit-, and avoiding shorthand animation.
Update: Through more debugging it appears ios and safari aren't rendering properly. The animation is technically playing, but the transition (ease) isn't following. They move, just not smoothly.
#-webkit-keyframes slide-in {
from {
-webkit-transform: translateX(-150%);
transform: translateX(-150%);
}
to {
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
}
#keyframes slide-in {
from {
transform: translateX(-150%);
}
to {
transform: translateX(-50%);
}
}
.land-cont {
overflow: hidden;
position: absolute;
top: 30px;
left: 0;
height: 80px;
width: 250px;
}
.reveal-cont {
transform: translateX(-150%);
-webkit-animation-duration: 0.6s;
-webkit-animation-timing-function: ease;
-webkit-animation-delay: 1.6s;
-webkit-animation-iteration-count: 1;
-webkit-animation-direction: normal;
-webkit-animation-fill-mode: forwards;
-webkit-animation-play-state: running;
-webkit-animation-name: slide-in;
animation-duration: 0.6s;
animation-timing-function: ease;
animation-delay: 1.6s;
animation-iteration-count: 1;
animation-direction: normal;
animation-fill-mode: forwards;
animation-play-state: running;
animation-name: slide-in;
display: block;
position: absolute;
width: 100%;
height: 100%;
overflow: hidden;
top: calc(50% - 50px);
background: rgb(32, 6, 6);
left: 50%;
z-index: 2;
color: #FFF;
z-index: 2;
background: -webkit-linear-gradient($gradient);
background: -o-linear-gradient($gradient);
background: linear-gradient($gradient);
-webkit-box-shadow: $shadow;
-moz-box-shadow: $shadow;
box-shadow: $shadow;
opacity: 1;
}
<div class="land-cont">
<div class="reveal-cont">
<h2>Alicia</h2>
</div>
</div>

Answer 1

Finally fixed it. I can't point to one exact change, but I know this question was the one that got it working in the end. Turns out the problem was in iOS and Safari, not Chrome. Here's a list of changes I made:
Implemented proper use of -webkit-
Didn't use shorthand animation
Used display: block
Added animation class after page load
I'm not sure why that last one works, but it fixed it. If anyone knows why it worked please let me know.