I'm creating a header component with stencil.js framework, the header have a normal state and an isScroll state which changed on scroll.
The issue is that when I scroll the header becomes jumpy and jittery, it goes to the bottom and when I scroll up it goes up and down and after about 2seconds it settles to it's expected position
On chrome, edge and opera the glitch doesn't happen only happens on mozilla firefox, I'm executing this function when the onscroll listener fires.
public applyScrollBehaviorThrottled = throttle(() => {
const { scrollY } = window;
this.isAtTop = scrollY === 0;
let eyebrowHeight = this.el.querySelector("qds-web-header-eyebrow")?.offsetHeight;
state.isScroll = this.preventCollapse? false: scrollY > this.lastScrollTop;
this.lastScrollTop = scrollY;
}, 50);
@Listen("scroll", { target: "window" })
public applyScrollBehavior(): void {
this.applyScrollBehaviorThrottled();
}`
when I commented this function the weird effect doesn't happen.
I also got a warning on firefox console
This site appears to use a scroll-linked positioning effect. This may not work well with asynchronous panning; see https://firefox-source-docs.mozilla.org/performance/scroll-linked_effects.html for further details and to join the discussion on related tools and features!
I tried to read through this article that mozilla warning suggested here
Tried to comment out other code, so I can be sure that the issue is here
so the issue has nothing to do with the stencil or the above code, it's just that I was a position: sticky; in css,and it was not working as expected, so I added display: block; with it and now it works fine , more information you can find here: