为什么我的jQuery动画在基于Webkit的浏览器中会卡顿？

Question

我正在处理一个非常简单的动画：将一行图片向左滑动：

$('#button').click(
    function() {
        $('div#gallery').animate({scrollLeft:'+=800px'}, 1000);
    }
);

这个应该是图片库；我隐藏了溢出来只显示一张图片。

尽管尝试了各种缓动参数，甚至在慢速情况下，Chrome和Safari中的动画仍然非常卡顿，但在Internet Explorer和Firefox中始终流畅。（网络上提出的大多数问题都是关于IE或Firefox卡顿！）

我找到了原因。对我来说，这是一个非常特殊的情况，可能不适用于大多数人，但也许它能帮助某人。我将在下面发布我的答案。（我认为网站准则允许这样做。）

- Andrew Cheong

---

如果您解决了自己的问题，最好在下面发布并“接受”自己的答案……只要它符合本网站的主题，并且足够清晰以帮助未来的读者。我的建议是，在您的问题上方发布一个示例和代码，以便为其提供更多背景信息。 - Sparky

Answer 1

对我而言，无论是24位的PNG、8位的PNG、GIF、JPEG等图片格式，在屏幕上出现大尺寸图片时，我的动画都会遇到问题。如果你有一个元素在大尺寸图片上方，可以尝试给你的元素添加以下CSS：

-webkit-transform: translateZ(0);

对于我来说，它确实起了作用，但留下了动画残留物。

最终解决这个问题的方法是简单地更改以下内容：

$('#myimage').animate({
    height: 0,
    top: '-=50'
}, 500, 'linear');

转换为：

$('#myimage').animate({
    height: '-=1'
}, 1, 'linear').animate({
    height: 0,
    top: '-=50'
}, 500, 'linear');

我刚刚在开头添加了一个小的1毫秒动画。我的想法是这可能会为即将到来的真正动画做好"准备工作"，而且它真的有效。您可能希望将其更改为20或50毫秒以确保安全。

- Gavin

---

谢谢Garvin。-webkit-transform: translateZ(0);也解决了我的问题。感谢您的分享，真的很有帮助。 - codeGEN

+1，经历了9个月，“-webkit-transform: translateZ(0);”仍然对我有所帮助。谢谢。 - DavidT

Answer 2

在我的情况下，问题不在代码上，而是在图片上——具体来说，是那些通过css宽度属性（强制）缩小的大图。当然，更大的图片可能需要更多的处理才能进行动画，但是IE和FF似乎可以很好地缩小它们（在我的情况下，2000像素宽的图像被缩小为800像素宽）。与此同时，Chrome和Safari似乎在播放这种图像时会卡顿。一旦我批量在Photoshop中将所有的图片缩小到实际的800像素宽，所有的动画都变得非常流畅。

其他细节。我使用的是jQuery 1.7。我遇到了在对img元素本身进行动画以及带有背景图像的div元素进行动画时的问题。

- Andrew Cheong

---

非常老的帖子，我知道，但我在Chrome上遇到了同样的问题。问题是，我的图像根据窗口大小动态缩放。有什么建议吗？ - user8581664

Answer 3

我知道这个帖子已经很老了，但为了编码效率...最近我在使用Chrome时遇到了类似的卡顿动画问题，在寻找解决方案时，发现了这个帖子（但不是FF或IE），将问题追踪到我的一个折叠图标上，它使用了png而不是gif（当我将png换成gif时）webkit浏览器就没有问题产生平滑动画（但一旦我再次将png换回去，我的动画又变得卡顿了...）

- JAMES

---

你的 PNG 和 GIF 有透明度吗？ - Sparky

它没有按照预期的那样呈现出一个8 x 8的方框（用矩形和正方形表示折叠和展开图标）。 - JAMES

无论新旧，这样的问题总是需要更多的解决方案。感谢您的参与。当时我个人使用的是jpg格式。 - Andrew Cheong