ios - 如何在 iOS 设备上滚动时保持动画 gif 动画？

Question

我知道这个has been asked before但我仍然不相信没有解决方法。我不相信的原因是因为我无意中设法将这些 gif 动画保存在我的网站上。我在这里的聊天中发布了这个，并在@CarrieKendall 的帮助下提出了 this fiddle .

这显然不是一个合适的解决方案，所以我想把它贴在这里供各位天才挑选并尝试帮助我弄清楚如何解决这个问题(最好不要占用太多资源)？

更新:

好的，所以我对 jsfiddle 进行了更多修改，并想出了 this :

HTML

<img class="link" src="http://i.imgur.com/jsm0x2c.gif">
<img class="link" src="http://i.imgur.com/jsm0x2c.gif">
<img class="link" src="http://i.imgur.com/jsm0x2c.gif">

CSS

@-webkit-keyframes WIGGLE {
  0%   { -webkit-transform: translate(0px, 0px); }
  100%   { -webkit-transform: translate(0px, 0px); }
}

keyframes WIGGLE {
  0%   { -webkit-transform: translate(0px, 0px); }
  100%   { -webkit-transform: translate(0px, 0px); }
}

.link{
  -webkit-animation: WIGGLE 1ms; 
          animation: WIGGLE 1ms;
}

这很奇怪，但它确实有效。一个什么都不做的动画。哦，我尝试用类似 scale 的东西替换 translate ，但这并没有奏效。这是这个奇怪的错误/解决方案的“最纯粹”形式。

尽管如此，我还是不太满意。如果比我更有知识的人可以看看这个并尝试弄清楚真正发生了什么使这个解决方法......有效，我会很高兴。希望这里有一些可以使用的东西，尽管是以更优雅的方式。

另外，我不知道像上面的解决方法这样的资源密集度如何，所以如果有人能帮我衡量那会很棒。

Answer 1

桌面浏览器不会出现相同的限制。这特定于 Apple 在其移动设备上的滚动实现。这是对旧款移动设备的保留，以确保滚动保持流畅，因为早期的 iPhone 在整个操作系统中明智地使用了加速渲染。

触发硬件加速会改变页面的渲染路径。在非加速页面中，浏览器直接渲染到屏幕上的纹理。滚动时，所有其他执行都将停止，因为平滑滚动渲染器控制了渲染。这不仅限于 GIF。如果 javascript 改变了页面内容，它也不会显示，直到页面完成滚动。
在加速页面中，加速对象实际上被发送到合成器。合成器将所有对象层放在正确的位置，然后创建一个合成纹理放在屏幕上。滚动实际上是合成器工作的一部分，并且由于合成器负责端到端的渲染，动画将继续。

不幸的是，由于 Apple 系统合成器的设计，确实没有“正确”的方法。事实上，随着 Apple 不断对 iOS 进行更新，硬件加速和非硬件加速的内容也发生了变化。比如在iOS6中，preserve3d不再触发加速。据推测，
-webkit-backface-visibility: hidden;
-webkit-perspective: 1000;
应该仍然有效。在您的情况下，我相信它有效，因为您使用的是关键帧。

就性能/资源影响而言，您的页面不会比任何其他加速页面使用更多的资源。