title: Animations lagging on mobile chrome
body: <p>I'm trying to do animations on my website. I'm using have a similar version of the jsfiddle code linked below. When viewed on desktop, the animations work well. However when viewed on mobile, specifically on my chrome browser, there is a weird lag. The jsfiddle shows the exact same lag when I open it on my phone. If I restart the chrome app the lag goes away back comes back soon after.</p>
  <p>This issue doesn't occur in Safari.</p>
  <p>I have the latest iPhone with IOS 14.6 and chrome V90.</p>
  <p><a href="https://jsfiddle.net/brodriguez98/e2bvwcja/33/" rel="nofollow noreferrer">https://jsfiddle.net/brodriguez98/e2bvwcja/33/</a></p>
  <p>HTML:</p>
  <pre><code>&lt;html&gt;
   &lt;p style = 'margin-top: 100vh;'&gt;above&lt;/p&gt;
   
   &lt;img class = 'balltest show-on-scroll standard-push' src = 'http://www.pngall.com/wp-content/uploads/5/Sports-Ball-Transparent.png'/&gt;
   
   &lt;img class = 'balltest show-on-scroll fade-in' src = 'http://www.pngall.com/wp-content/uploads/5/Sports-Ball-Transparent.png'/&gt;
    
   &lt;p style = 'margin-bottom: 100vh'&gt;below&lt;/p&gt;
  &lt;/html&gt;
  </code></pre>
  <p>CSS:</p>
  <pre><code>.balltest {
      width: 50px;
  }
  
  .fade-in {
      opacity: 0;
      -webkit-transition: transform 4s 0.25s cubic-bezier(0, 1, 0.3, 1), opacity 1s 0.25s ease-out;
      -moz-transition: transform 4s 0.25s cubic-bezier(0, 1, 0.3, 1), opacity 1s 0.25s ease-out;
      -o-transition: transform 4s 0.25s cubic-bezier(0, 1, 0.3, 1), opacity 1s 0.25s ease-out;
      transition: transform 4s 0.25s cubic-bezier(0, 1, 0.3, 1), opacity 0.3s 0.25s ease-out;
      will-change: transform, opacity;
  }
  
  .standard-push {
      opacity: 0;
      transform: translateY(4em);
      -webkit-transition: transform 4s 0.25s cubic-bezier(0, 1, 0.3, 1), opacity 1s 0.25s ease-out, translateZ(0);
      -moz-transition: transform 4s 0.25s cubic-bezier(0, 1, 0.3, 1), opacity 1s 0.25s ease-out;
      -o-transition: transform 4s 0.25s cubic-bezier(0, 1, 0.3, 1), opacity 1s 0.25s ease-out;
      transition: transform 4s 0.25s cubic-bezier(0, 1, 0.3, 1), opacity 0.3s 0.25s ease-out;
      will-change: transform, opacity;
  }
  
  .is-visible {
      transform: translateY(0);
      opacity: 1;
  }
  </code></pre>
  <p>Javascript:</p>
  <pre><code>var elementsToShow = document.querySelectorAll('.show-on-scroll');
  $(window).scroll(function() {
      Array.prototype.forEach.call(elementsToShow, function (element) {
          if (isElementInViewport(element)) {
              element.classList.add('is-visible');
          } else {
              element.classList.remove('is-visible');
          }
      });
  });
  
  
  // Helper function from: http://stackoverflow.com/a/7557433/274826
  function isElementInViewport(el) {
      // special bonus for those using jQuery
      if (typeof jQuery === &quot;function&quot; &amp;&amp; el instanceof jQuery) {
          el = el[0];
      }
      var rect = el.getBoundingClientRect();
      return (
          (rect.top &lt;= 0 &amp;&amp;
              rect.bottom &gt;= 0) ||
          (rect.bottom &gt;= (window.innerHeight || document.documentElement.clientHeight) &amp;&amp;
              rect.top &lt;= (window.innerHeight || document.documentElement.clientHeight)) ||
          (rect.top &gt;= 0 &amp;&amp;
              rect.bottom &lt;= (window.innerHeight || document.documentElement.clientHeight))
      );
  }
  </code></pre>
  <p>I apologize for the tiny screen, couldn't get JSfiddle on fullscreen on my phone:</p>
  <p>Animation working right after restarting mobile chrome:
  <a href="https://www.loom.com/share/ac6c843b90d2428bb875572d55e32959" rel="nofollow noreferrer">https://www.loom.com/share/ac6c843b90d2428bb875572d55e32959</a></p>
  <p>Animation breaking soon after (when I close/reload the page):
  <a href="https://www.loom.com/share/e51cf88aa1a74aed8e4d1ed253e83ea0" rel="nofollow noreferrer">https://www.loom.com/share/e51cf88aa1a74aed8e4d1ed253e83ea0</a></p>
  <p>This is exactly the same behavior I'm seeing on my website using mobile chrome browser.</p>
  <p><strong>Update:</strong>
  Neither of the answers below worked for me. I forgot to mention that this behavior is also happening with text. Also, thanks for suggesting codesandbox, I forked your code and made it even simpler by removing the images but I still get the same result on my iphone chrome browser. I also tried wrapping everything with an onload function and that didn't work either.</p>
  <p>For now I was able to fix this with JQuery animations but I would still like CSS3 transitions to work on my site.</p>
  <p><a href="https://codesandbox.io/s/animation-test-forked-tqurn?file=/index.html" rel="nofollow noreferrer">https://codesandbox.io/s/animation-test-forked-tqurn?file=/index.html</a></p>
  <p><a href="https://i.stack.imgur.com/zdYGS.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/zdYGS.gif" alt="enter image description here" /></a></p>