title: CSS keyframes animation works on Chrome desktop but not mobile?
body: <p>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.</p>
  
  <p>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 <a href="https://asilhavy.com" rel="nofollow noreferrer">asilhavy.com</a>. It doesn't play on load, but if I go to a new page and select the back button, it will play <em>after I scroll.</em> So weird. The scroll bar is also weird when I go back after visiting a new page.</p>
  
  <p>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. </p>
  
  <p><strong>Update:</strong> Through more debugging it appears ios and safari aren't rendering properly. The animation <em>is technically</em> playing, but the transition (ease) isn't following. They move, just not smoothly.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>@-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;
          }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>            &lt;div class="land-cont"&gt;
                  &lt;div class="reveal-cont"&gt;
                      &lt;h2&gt;Alicia&lt;/h2&gt;
                  &lt;/div&gt;
              &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>