transform: translate animation not functioning on iOS 15.1 devices

Question

12/4/21 update: I asked some friends to test. It works fine on their devices. Both Android and iOS.

So I tried my wife's iPad, and it worked. But it didn't work on my daughter's iPad.

Digging into the OS, it worked on iOS 14.8.1, but the 3 devices updated to iOS 15.1 didn't work.

Data: | Working? | iOS 15.x | iOS 14.x | Android | |:-------: |:--------:| :------: | :-----: | | Yes | 0 | 2 | 2 | | No | 6 | 0 | 0 |

Still waiting for more testing to come in, but there appears to be a trend...

---

I'm trying to make an animation out of a static image on a school project.

On my desktop, Chrome and Edge's inspect mobile simulator both show the animation as I had intended it.

But after I uploaded it to my github, my mobile devices (iOS) are not following my transform:translate CSS code.

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: https://stackoverflow.com/questions/54104578/possible-to-convert-htmlcss-animationpng-extension-image-to-gif-extension-im CSS transform not working on mobile

An animated gif of the "Video" of the output.

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.

#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%);
  }
}

<div id="divNV2">
  <a href="https://scottsigler.com/library/#post-1154">
    <img id="novellasBanner" alt="Tie-In Novellas" src="https://kurt-eh.github.io/images/RID-EB-680-680x300.jpg">
  </a>
</div>

Answer 1

We worked it out in class tutorial today.

The answer was because of how I was zooming into the picture. I was using width, and increasing from 100% to 3000%.

I should have been using scale within the transform before the translate method.

I will leave in the -webkit versions for isurance.

*{
background-color:orange;
}
#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 {
  z-index: index 100;;
  width: 100%;
  background: pink;
  transform-origin: center;
  -webkit-transform-origin: center;
  animation-name: dinoAttack;
  animation-timing-function: cubic-bezier(.59,.15,1,-0.15);
  animation-iteration-count: infinite;
  animation-duration: 8s;
}
@keyframes dinoAttack {
  0% {
    left: 0px;
    transform: scale(1.0) translate3D(0, 0, 0);
    -webkit-transform: scale(1.0) translate3D(0, 0, 0);
    -moz-transform: scale(1.0) translate3D(0, 0, 0);
  }
  90% {    
    left: 0px;
    transform: scale(5.0) translate3D(-30%, -4%, 0);
    -webkit-transform: scale(5.0) translate3D(-30%, -4%, 0);
    -moz-transform: scale(5.0) translate3D(-30%, -4%, 0);
  }
  100% {    
    left: 0px;   
    transform: scale(5.0) translate3D(-30%, 25%, 0);
    -webkit-transform: scale(5.0) translate3D(-30%, 25%, 0);
    -moz-transform: scale(5.0) translate3D(-30%, 25%, 0);
  } 
}

<div id="divNV2">
  <a href="https://scottsigler.com/library/#post-1154">
    <img id="novellasBanner" alt="Tie-In Novellas" src="https://kurt-eh.github.io/images/RID-EB-680-680x300.jpg">
  </a>
</div>