渲染图像时，Chrome 中的 CSS 过渡停止或不稳定

Question

我正在开发一个支持触控的 html5+css3 图片库。目标设备主要是平板电脑和其他移动设备。图片很大（大约 1000x1500），一个画廊可以有 100 到 200 张图片。画廊基本上是一个旋转木马，用户可以左右滑动浏览画廊。它的工作方式是将图像布局在一个 div（名为#ribbon）中，当您向左滑动时，该 div 会向左过渡，从而将下一张图像滑入视图。

<div id="carousel">
  <div id="ribbon">
    <div class="slide"><img src=""></div>
    <div class="slide"><img src=""></div>

为了限制带宽消耗和初始加载时间，实际上只将前 10-15 个图像容器插入到 html 中。当您滑动到轮播的中心时，第一个图像容器会跳到轮播的末尾，并在动画结束时加载新的图像。在 Safari 和 iOS 上，这就像黄油一样顺畅。

我知道不要不必要地触摸 DOM，尤其是在 CSS 转换运行时，代码在这方面应该是最佳的。但是，在 Chrome（桌面和 Android）中，每次设置下一个图像 src 时，动画都会出现打嗝。我可以在开发人员工具中看到这一点，显然导致打嗝的事件是图像大小调整和渲染。

为了尝试使动画更流畅，每次拖动事件开始时，所有图像（当前、左、右除外）都设置为白色 gif 像素。当您快速浏览图库时，这也很有帮助，因为它会跳过加载不必要的图像。

有没有办法缓解这个问题？

jsFiddle 示例

一个简化的例子。不确定这是否足以证明问题，但我尝试为滑动事件计时以中断图像解码和渲染。

http://jsfiddle.net/YevMC/

补充说明

• 我尝试通过画布调整图像大小并将图像 src 设置为 canvas.toDataUrl()，但似乎没有帮助。也许我应该试试网络工作者？
• 我已经在使用 3D 变换了。
• 应用了所有 CSS hack，translate3d，perspective: 1000（这在 Chrome 中似乎很有帮助）。
• backface-visibility: hidden 会导致不必要的副作用，例如只显示图片的一部分。
• 在 img 元素本身上启用 3D 有助于 chrome，但对 iOS 中的动画性能有不利影响。幸运的是，window.chrome 对象可以轻松检测 chrome。

Chrome 时间轴

Answer 1

尝试使用 requestAnimationFrame 而不是 setTimeout