我知道这个
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); }
}
.link{
-webkit-animation: WIGGLE 1ms;
animation: WIGGLE 1ms;
}
这很奇怪,但它确实有效.绝对没有任何动画的动画.哦,我尝试用缩放比较替换翻译但是没有做到这一点.这是这个奇怪的bug /解决方案的“最纯粹”形式.
尽管如此,我还不太满意.我喜欢它,如果一个比我更有知识的人可以看看这个,并试图找出真正发生的事情,这使得这个解决方法……工作.希望这里有一些可以使用的东西,尽管是以更优雅的方式.
此外,我不知道像上面的解决方法那样资源密集的东西是什么,所以如果有人可以帮助我衡量那是非常棒的.
解决方法
桌面浏览器不会出现相同的限制.这特定于Apple在其移动设备上滚动的实现.这是他们旧款移动设备的保留,以确保滚动保持平稳,因为早期的iPhone在整个操作系统中明智地使用了加速渲染.
触发硬件加速会更改页面的渲染路径.在非加速页面中,浏览器直接渲染到屏幕纹理.滚动时,所有其他执行都将停止,因为平滑滚动渲染器控制渲染.这不仅限于GIF.如果javascript会更改页面内容,则在页面完成滚动之前也不会显示.
在加速页面中,加速对象实际上被发送到合成器.合成器将所有对象层放在正确的位置,然后创建一个复合纹理以放在屏幕上.滚动实际上是合成器工作的一部分,由于合成器负责从端到端的渲染,动画将继续.
不幸的是,由于Apple系统合成器的设计,实际上没有“正确”的方式.事实上,由于Apple一直在对iOS进行更新,因此硬件加速的内容发生了变化,而不是.例如,在iOS6中,preserve3d不再触发加速.据称,
-webkit-backface-visibility：hidden;
-webkit-perspective：1000;
应该仍然有效.在您的情况下,我相信它的工作原理是因为您正在使用关键帧.
