kurt-eh / kurt-eh.github.io Goto Github PK

12/4/2021 update:

The issue appears to be with iOS 15.1.
Tested the site on several devices:
Android: 2 devices worked properly.
iOS 14.7: Worked properly. (1 device)
iOS 14.8: Worked properly. (1 device)
iOS 15.1: animation fails. (5 devices)
https://stackoverflow.com/questions/70222812/transform-translate-animation-not-functioning-on-ios-15-1-devices

The intent of the dinosaur is to have it move slowly, slightly to the right, and then at the end move in for "the kill" (zoom in and re-center the image on it's teeth).

Chrome's desktop's inspect "phone preview" shows the animation behaving correctly.

But when I open the page on my iPad or iPhone, the translate motion does the opposite.

`
/media: default:/

#divNV2 /*div containing the image. */
{
width: 680px; /max image size from file/
height: 14em;
display:flex;
grid-area:nv2;
margin-left:auto;
margin-right:auto;
position:relative;
overflow: hidden;
margin-bottom: 2em;
border:2px black solid;
}

#novellasBanner //the image's id */
{
width:100%;
animation-name: dinoAttack;
animation-timing-function: cubic-bezier(.28,.03,1,-0.07);
animation-iteration-count: infinite;
animation-duration:8s;
}

@Keyframes dinoAttack
{
0%{width: 100%;}
/* 10%{width: 95%;
transform:translate(-60%)} */
96%{
width: 3000px;
left:0px;
transform:translate(-70%, -50%);
}
100%{
width: 3000px;
left:0px;
transform:translate(-70%, -35%);
}

}
/* mobile versions:*/

@media screen and (max-width:1200px) {

#divNV2{
    width: 680px;
}

}
@media screen and (max-width:768px) {

#divNV2{
    width: 85%;
}

}

@media screen and (max-width:576px) {

#divNV2{
    width:90%;
}
  @keyframes dinoAttack {
      0%{
          width: 115%;
      }
      96%{
          width: 3000px;
          left:0px;
          transform:translate(-70%, -50%);
      }
      100%{
          width: 3000px;
          left:0px;
          transform:translate(-70%, -35%);
      }
  }
}`