I have a strange behavior of header scrolling. All website pages use the same header template. The class “scrolling” is defined with custom css (transforms header height and modifies some elements in it). Everything works fine in google chrome and microsoft edge.
The problem exists only in firefox and only archive pages. Ordinary pages are fine.
On archives the class scrolling is toggled without any user actions. On the video you can see the effect while I just load the page and don’t scroll. I made in the assumption that something is wrong with the page content, so I cleared everything from the template to check and the problem still is there. I cannot keep the page without content so I show it back. You can investigate the page was the content.
Indeed, scroll snap is activated on the template. It’s not my custom css. Are my settings causing this or just scroll snap causes such behavior in firefox?
My padding setting here calc(var(–header-scroll-height)*1.2)
I have to remove it, but it would be nice feature to have on the website.
It is difficult to say why only Firefox behaves like this. However, this means that it is probably not a general problem, but a browser-specific problem in “certain” situations. There seem to be some problems with scroll-snap in general: https://bugzilla.mozilla.org/buglist.cgi?quicksearch=scroll-snap
Well, with the current content, it seems to work strangely enough. I have added the two css properties in the dev tools and can’t see any problems. In your previous example with the empty 100vh section, I could. All in all, strange, but still not a bug.
I also just noticed that you are using lenis scroll animations. Perhaps this could also be causing the problem. It might be worth trying to deactivate the feature and test it again.
