动画的GIF背景在iPad上滞后任何工作？答案

【问题标题】：Animated gif background lagging on Ipad any work around?动画的GIF背景在iPad上滞后任何工作？
【发布时间】：2014-11-16 15:31:52
【问题描述】：

我正在使用来自以下站点的方法“仅 CSS 技术 #2”，但带有动画 GIF：

http://css-tricks.com/perfect-full-page-background-image/

GIF 相对较小（大约 500KB），但它会导致我的网站在向下/向上滚动时滞后很多。快速滚动时，包含我的文本的 div 实际上正在加载/刷新，就像延迟加载（我没有使用延迟加载插件）一样。

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

有什么解决方法吗？

当用静态图像替换动画 gif 时，上述问题就消失了——我很确定是动画 gif 导致了这里的延迟。

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

【问题讨论】：

这可能与 GPU 重新绘制场景有关。如果向其添加 CSS3 转换（如 -webkit-transform: rotateX(0);）是否有帮助？
哇！谢谢这里的东西！动画 gif 不再冻结，但即使没有插件，div 也会“延迟加载”。即使向上滚动，我也必须等待我之前出现的段落再次出现（这不会发生在我的桌面上）
谁能解释一下添加 CSS3 转换如何解决问题？ :) 提前致谢。
本，感谢编辑
@HarshalGajjar Luke Roberts 在下面得到了正确答案。简而言之，它将它交给专用于图形的芯片。不过不要过度使用它，因为它只会使另一个芯片负担过重，并且会再次减速。

标签： html css

【解决方案1】：

正如卢克·罗伯茨 (Luke Roberts) 提到的（基于我对原始帖子的评论），向元素添加变换将使其渲染更平滑。不要过度使用它（过多地交给 GPU，它会像 CPU 一样成为瓶颈），但偶尔应用它可以让您直接将繁重的事情交给渲染器，而不是通过 DOM 渲染来解析它。所以解决方案很简单，当然如果你想把它限制在 iPad 上，当使用 -webkit- 前缀时已经限制了很多：

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

你可以通过使用来进一步限制它

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

将其限制为视网膜 ipad。无论如何，非视网膜 ipad 将无法顺利运行。我想。

另外，您在 cmets 中提到的段落问题可能是因为该段落不是由 GPU 渲染的。确保不要过度使用它，但您也可以尝试将您的内容 div 放入渲染器。如果我是正确的，每个元素都是单独处理的，但被视为一层。只要你只是手周围的div，应该不会占用太多GPU。只是不要普遍应用它，看看它是否有帮助。

【讨论】：

【解决方案2】：

通过对元素应用“3D”变换，它会诱使设备使用其内置 GPU 而不是 CPU 来处理渲染，因为 GPU 用于处理玩游戏等，所以性能更好。

您可以通过观看 Paul Irish 的视频来了解这一点，该视频非常深入地介绍了这些内容。

找到here

【讨论】：