在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

滚动期间元素显示为空白

这是因为有时浏览器无法快速渲染以跟上滚动。他们只是停止了任何东西，直到他们能够赶上来，而不是引起一个笨拙的卷轴。这种情况尤其可能发生在移动设备上，只需轻轻一按即可快速滚动，但资源非常少。

Navbar滚动事件延迟

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

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