title: transform: translate animation not functioning on iOS 15.1 devices
body: <p>12/4/21 update:
  I asked some friends to test. It works fine on their devices. Both Android and iOS.</p>
  <p>So I tried my wife's iPad, and it worked. But it didn't work on my daughter's iPad.</p>
  <p>Digging into the OS, it worked on iOS 14.8.1, but the 3 devices updated to iOS 15.1 didn't work.</p>
  <p>Data:
  | Working? | iOS 15.x | iOS 14.x | Android |
  |:-------: |:--------:| :------: | :-----: |
  | Yes      |    0     |     2    |    2    |
  | No       |    6     |     0    |    0    |</p>
  <p>Still waiting for more testing to come in, but there appears to be a trend...</p>
  <hr />
  <p>I'm trying to make an animation out of a static image on a school project.</p>
  <p>On my desktop, Chrome and Edge's inspect mobile simulator both show the animation as I had intended it.</p>
  <p>But after I uploaded it to my github, my mobile devices (iOS) are not following my transform:translate CSS code.</p>
  <p>I've found a few threads here in Stack Overflow that are suggesting using webkit,  but either I'm adding my code incorrectly, or something else is going on:
  <a href="https://stackoverflow.com/questions/31247808/css-transform-not-working-on-mobile">https://stackoverflow.com/questions/54104578/possible-to-convert-htmlcss-animationpng-extension-image-to-gif-extension-im</a>
  <a href="https://stackoverflow.com/questions/31247808/css-transform-not-working-on-mobile">CSS transform not working on mobile</a></p>
  <p>An animated gif of the &quot;Video&quot; of the output.</p>
  <p>Left: iPad.  Right: desktop inspect, iPad simulator (both using Chrome: 96.0.4664.53 iOs, 96.0.4664.45 desktop.) Apologies for the jitter, had to drop a lot of frames to hit the size limit.</p>
  <p><a href="https://i.stack.imgur.com/CF6YE.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/CF6YE.gif" alt="enter image description here" /></a></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>#divNV2 {
    width: 680px;
    height: 300px;
    display: flex;
    grid-area: nv2;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    overflow: hidden;
    margin-bottom: 2em;
    border: 2px black solid;
  }
  
  #novellasBanner {
    width: 100%;
    -webkit-animation-name: dinoWebkitAttack 8s cubic-bezier(.28, .03, 1, -0.07) infinite;
    animation-name: dinoAttack;
    animation-timing-function: cubic-bezier(.28, .03, 1, -0.07);
    animation-iteration-count: infinite;
    animation-duration: 8s;
  }
  
  @-webkit-keyframes dinoWebkitAttack {
    0% {
      width: 100%
    }
    96% {
      width: 3000px;
      left: 0px;
      -webkit-transform: translate(-70%, -50%);
    }
    100% {
      width: 3000px;
      left: 0px;
      -webkit-tranform: translate(-70%, -35%);
    }
  }
  
  @keyframes dinoAttack {
    0% {
      width: 100%;
    }
    96% {
      width: 3000px;
      left: 0px;
      transform: translate(-70%, -50%);
      -webkit-transform: translate(-70%, -50%);
      -moz-transform: translate(-70%, -50%);
    }
    100% {
      width: 3000px;
      left: 0px;
      transform: translate(-70%, -35%);
      -webkit-transform: translate(-70%, -35%);
      -moz-transform: translate(-70%, -35%);
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="divNV2"&gt;
    &lt;a href="https://scottsigler.com/library/#post-1154"&gt;
      &lt;img id="novellasBanner" alt="Tie-In Novellas" src="https://kurt-eh.github.io/images/RID-EB-680-680x300.jpg"&gt;
    &lt;/a&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>