动画GIF背景落后于Ipad任何工作？

我使用的方法“CSS-只有技术＃2”从下面的网站，但与GIF动画：动画GIF背景落后于Ipad任何工作？

的GIF相对较小（约500KB），但它使我的网站滞后向下/向上滚动时很多。包含我的文本的div实际上是加载/刷新，就像懒惰加载（我没有使用lazyload插件）滚动时一样快。

我的段落需要一段时间才能加载，同时背景动画gif会冻结。

有没有解决方法？

当动画gif被替换为静态图像时，上面的问题就消失了 - 我确定这是动画gif导致这里的延迟。

无论如何，似乎这个问题只适用于iPad。

它可能与GPU重绘场景有关。如果向它添加CSS3变换（如-webkit-transform：rotateX（0）;'），它有帮助吗？ – somethinghere 2014-09-22 15:41:21

哇！非常感谢！动画GIF不再冻结，但是即使没有插件，div也是“延迟加载”。即使滚动起来，我也必须等待先前出现的段落再次出现（这不会发生在我的桌面上） – 2014-09-22 15:50:46

任何人都可以向我解释如何添加CSS3转换解决了问题？：）提前致谢。 – 2014-09-22 16:10:44

通过应用“3D”转换为一个元素，它的招数一个设备到使用它，而不是CPU的处理渲染这是性能更好，因为GPU的用于处理玩游戏等

内置GPU你可以通过观看保罗·爱尔兰的视频深入了解这个东西来得到一个好主意。

发现here

2014-09-22 16:28:51 RustyCollins

由于卢克罗伯茨提到的（根据我原来的岗位上做出了评论），增加一个转换为一个元素将允许它的渲染更加平滑。不要过度使用它（与GPU交给太多，并且像CPU一样受到瓶颈），但是偶尔使用它可以让您直接将渲染的东西交给渲染器，而不是通过DOM渲染解析。更通过

@media (-webkit-min-device-pixel-ratio: 2)

.gif { 
    -webkit-transform: rotateX(0); 
}

你可以限制它：所以解决办法很简单，当然，如果你想它仅限于在iPad上使用-webkit-前缀的时候就已经限制了它颇有几分

限制它视网膜ipad。无视网膜平板电脑无法顺利运行。我认为。

此外，您在评论中提到的段落问题可能是因为段落不是由GPU呈现的。一定不要过度使用它，但你也可以尝试将你的内容div放入渲染器中。如果我是正确的，每个元素都是分开递交的，但是被视为一个层。只要你掌握了周围的div，就不需要太多的GPU。只是不要普遍应用它，看看它是否有帮助。

2014-09-23 10:43:16 somethinghere

回答