css - 在 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

元素在滚动期间显示为空白

这是因为有时浏览器的渲染速度无法跟上滚动的速度。他们不会造成卡顿的卷轴，而是停止撕裂任何东西，直到他们能 catch 。这尤其有可能发生在移动设备上，您只需轻弹手指即可快速滚动，但资源却非常少。

---

导航栏滚动事件延迟

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

---

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