i’ve got a very strange issue with one of our webpages, when you scroll on the page there seems to be some space generated above the page which changes the height of the html container and makes the page jump around while scrolling.
As soon as I open the Inspector the issue disappears and is very hard to reproduce while the inspector is open. The issue appears in various browsers sporadically. Firefox (88.0.1, MacOS 11.4) seems to be the browser where I can reproduce it the best but it also happens on Windows 10.
I tried to capture it with quicktime the best I can (please ignore the zoom, i was holding cmd for a short moment while scrolling): https://www.youtube.com/watch?v=hFNol4eAeYA
The URL of the page is: https://karlaugust.de/
Anyone has an idea where the origin of this problem could be?
Thank you!
Advertisement
Answer
Thank you for your replys, i finally pinpointed the problem:
The header (navigationbar w/ Logo, Menu etc.) was position:sticky, which seems to produce this problem when the parent container (#container) does not have a declared height (e.g. is display:block), putting the #container to display:inline-block seems to solve it. Still don’t know why exactly but there seems to be a lot of bugs reported in regards to position:sticky and firefox.