javascript - 实现简单的视差 : Images "jumpy" in Firefox and Safari

Question

我有以下用例:

1. 一些内容元素，中间有图片
2. 图像应始终作为一个整体显示(与 background-size 属性的 contain 值相关)
3. 此行为在所有视口(viewport)上都应该相同，从而使图像按比例缩放(但始终完全可见)
4. 滚动时，每张图片都应该正常滚动到顶部
5. 一旦图像到达顶部，视差效果就会开始

你可以在这里看到我的实现: http://codepen.io/AvantiC/pen/BpReza

它在 Chrome 中运行良好，滚动和视差看起来非常流畅。但是当我在 Firefox 或 Safari 中测试该页面时，图像表现出“跳跃”/“生涩”(不确定这里的正确词是什么；))。

我不确定这是 Firefox/Safari 的问题还是我的实现有问题，Chrome 只是在内部以某种方式弥补了它。

也许有人可以为我指明正确的方向。 :)

您好， 先锋

Answer 1

与其在每一帧都设置图像位置，不如尝试更改 CSS，以便在用户滚动到某个点后图像保持静止。