transform：翻译动画在 iOS 15.1 设备上不起作用

Question

12/4/21 更新： 我请了一些朋友来测试。它在他们的设备上运行良好。 Android 和 iOS。

所以我尝试了我妻子的 iPad，它成功了。但它在我女儿的 iPad 上不起作用。

深入操作系统，它在 iOS 14.8.1 上运行，但更新到 iOS 15.1 的 3 台设备都无法运行。

数据： |在职的？ | iOS 15.x | iOS 14.x |安卓 | |:-------: |:--------:| :--------: | :-----: | |是 | 0 | 2 | 2 | |没有 | 6 | 0 | 0 |

仍在等待更多测试的到来，但似乎有一种趋势......

---

我正在尝试用一个学校项目的静态图像制作动画。

在我的桌面上，Chrome 和 Edge 的检查移动模拟器都按照我的预期显示动画。

但是在我将它上传到我的 github 之后，我的移动设备 (iOS) 没有遵循我的 transform:translate CSS 代码。

我在 Stack Overflow 中发现了一些建议使用 webkit 的线程，但要么我错误地添加了我的代码，要么发生了其他事情： https://stackoverflow.com/questions/54104578/possible-to-convert-htmlcss-animationpng-extension-image-to-gif-extension-im CSS transform not working on mobile

输出的“视频”的动画 gif。

左：iPad。右：桌面检查，iPad 模拟器（都使用 Chrome：96.0.4664.53 iOs，96.0.4664.45 桌面。）为抖动道歉，不得不丢掉很多帧以达到大小限制。

#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

当您像这样为代码添加前缀时：

-webkit-tranform: translate(-70%, -35%);

确保还包括不带前缀的转换：

-webkit-tranform: translate(-70%, -35%);
tranform: translate(-70%, -35%);

Answer 2

我们今天在课堂教程中解决了这个问题。

答案是因为我是如何放大图片的。 我使用的是宽度，从 100% 增加到 3000%。

我应该在 translate 方法之前在转换中使用缩放。

我将保留在 -webkit 版本中以获得保险。

*{
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>