在 Firefox、iPad 和 Safari 上快速滚动会导致元素消失然后重新出现

Question

我很好奇为什么会发生这种情况。它在 Firefox 和 iPad 上最为明显，但 Safari 也受此影响。

我在两个地方看到过这个。

我有一张背景图片，它是深色的，在它上面有一个白色的容器，它占据了 90% 的屏幕并包含了所有的内容。在 Firefox 和 iPad 上，如果我快速滚动，白色会消失，然后重新出现。

我还有一个导航栏，一旦用户从顶部滚动 30 像素，它将添加一个具有固定位置的类；它不能以固定的方式开始。在 chrome 上它会按预期工作，但在 Firefox 和 Safari 上会出现延迟，然后会添加菜单。

iPad似乎是因为这个：iPad Safari scrolling causes HTML elements to disappear and reappear with a delay（目前还没有测试）

只有当我快速滚动时，内容才会消失，但菜单会以正常的滚动速度出现；如果我滚动得很慢，它将按预期工作。

Answer 1

滚动时元素显示为空白

这是因为有时浏览器的渲染速度不足以跟上滚动。他们不会导致滚动，而是停止撕裂任何东西，直到他们赶上为止。这种情况尤其可能发生在移动设备上，您只需轻弹手指即可快速滚动，但资源非常少。

---

导航栏滚动事件延迟

这取决于浏览器，但他们再次尝试确保快速滚动体验。他们可能会做的一件事是拒绝做昂贵的onscroll 事件，直到滚动基本结束。我也相信拒绝进行onscroll 事件可以让他们进行超酷的硬件加速，这超出了我的回答能力。

---

Thishtml5rocks 文章是阅读浏览器如何进行硬件加速的有趣起点。