0

I'm curious as to why this happens. It's most visible on Firefox, and on an iPad, but Safari also suffers from this a bit.

I've seen this in two spots.

I have a background picture, which is dark, and a white container on top of it which takes up 90% of the screen and contains all the content. On Firefox and on an iPad, If I scroll really quickly the white will disappear, then reappear.

I also have a navbar that once a user has scrolled 30 pixels from the top, it will add a class with a fixed position; it can't start out as fixed. On chrome it will work as expected, but on Firefox and Safari a delay will occur then the menu will be added.

The iPad seems to be due to this: iPad Safari scrolling causes HTML elements to disappear and reappear with a delay (currently haven't tested)

The content disappearing only happens when I scroll really quickly, but the menu will occur at a just a regular scroll rate; if I scroll really slowly it will work as expected.

Community
  • 1
  • 1
Jack Rothrock
  • 407
  • 1
  • 8
  • 21

1 Answers1

1

Element appearing to blank during scroll

This is because sometimes the browsers can't render fast enough to keep up with the scroll. Rather than cause a janky scroll, they just stop rending anything until they can catch up. This is particularly likely to happen on mobile where you scroll really fast with just a flick of the finger, but resources are pretty low.

Navbar scroll event delayed

This depends on the browser, but again they are trying to ensure a fast scroll experience. One of the things they might do is refuse to do expensive onscroll events until after the scroll is mostly over. I also believe that refusing to do onscroll events allows them to do cool hardware acceleration that is beyond my ability to answer.

This html5rocks article is an interesting starting point for reading about how browsers do hardware acceleration.

Community
  • 1
  • 1
JosiahDaniels
  • 2,411
  • 20
  • 37