在 Firefox iPad 和 Safari 上快速滚动会导致元素消失然后重新出现
Scrolling really quickly on Firefox, iPad, and Safari causes elements to disappear then reappear
我很好奇为什么会这样。它在 Firefox 和 iPad 上最为明显，但 Safari 也受到了一点影响。
我在两个地方看到过这个。
我有一张黑色的背景图片，上面有一个白色容器，它占据了屏幕的 90%，包含了所有内容。在 Firefox 和 iPad 上，如果我滚动得非常快，白色会消失，然后重新出现。
我还有一个导航栏，一旦用户从顶部滚动 30 像素，它就会添加一个固定位置的 class；它不能像固定的那样开始。在 chrome 上它将按预期工作，但在 Firefox 和 Safari 上会出现延迟，然后将添加菜单。
iPad好像是因为这个：iPad Safari scrolling causes HTML elements to disappear and reappear with a delay（目前没测试）
只有当我滚动得非常快时，内容才会消失，但菜单会以正常的滚动速度出现；如果我滚动得非常慢，它将按预期工作。
元素在滚动期间显示为空白
这是因为有时浏览器的渲染速度无法跟上滚动的速度。他们不会造成卡顿的卷轴，而是停止撕裂任何东西，直到他们能赶上。这尤其可能发生在移动设备上，您只需轻弹手指即可快速滚动，但资源非常低。
导航栏滚动事件延迟
这取决于浏览器，但他们再次尝试确保快速滚动体验。他们可能做的一件事是拒绝做昂贵的 onscroll 事件，直到滚动基本结束。我也相信，拒绝做 onscroll 事件可以让他们做超酷的硬件加速，这超出了我的回答能力。
This html5rocks 文章是阅读浏览器如何进行硬件加速的有趣起点。
我很好奇为什么会这样。它在 Firefox 和 iPad 上最为明显，但 Safari 也受到了一点影响。
我在两个地方看到过这个。
我有一张黑色的背景图片，上面有一个白色容器，它占据了屏幕的 90%，包含了所有内容。在 Firefox 和 iPad 上，如果我滚动得非常快，白色会消失，然后重新出现。
我还有一个导航栏，一旦用户从顶部滚动 30 像素，它就会添加一个固定位置的 class；它不能像固定的那样开始。在 chrome 上它将按预期工作，但在 Firefox 和 Safari 上会出现延迟，然后将添加菜单。
iPad好像是因为这个：iPad Safari scrolling causes HTML elements to disappear and reappear with a delay（目前没测试）
只有当我滚动得非常快时，内容才会消失，但菜单会以正常的滚动速度出现；如果我滚动得非常慢，它将按预期工作。
元素在滚动期间显示为空白
这是因为有时浏览器的渲染速度无法跟上滚动的速度。他们不会造成卡顿的卷轴，而是停止撕裂任何东西，直到他们能赶上。这尤其可能发生在移动设备上，您只需轻弹手指即可快速滚动，但资源非常低。
导航栏滚动事件延迟
这取决于浏览器，但他们再次尝试确保快速滚动体验。他们可能做的一件事是拒绝做昂贵的 onscroll 事件，直到滚动基本结束。我也相信，拒绝做 onscroll 事件可以让他们做超酷的硬件加速，这超出了我的回答能力。
This html5rocks 文章是阅读浏览器如何进行硬件加速的有趣起点。