OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

Glitchy Scroll Behavior on Mozilla Firefox Browser

  • Thread starter Thread starter Amine Zouari
  • Start date Start date
A

Amine Zouari

Guest
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.

Code:
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);

Code:
@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

<p>I'm creating a header component with stencil.js framework, the header have a normal state and an isScroll state which changed on scroll.</p>
<p>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</p>
<p>On chrome, edge and opera the glitch doesn't happen only happens on <strong>mozilla firefox</strong>, I'm executing this function when the onscroll listener fires.</p>
<pre><code>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);
</code></pre>
<pre><code>@Listen("scroll", { target: "window" })
public applyScrollBehavior(): void {
this.applyScrollBehaviorThrottled();
}`
</code></pre>
<p>when I commented this function the weird effect doesn't happen.</p>
<p>I also got a warning on firefox console</p>
<blockquote>
<p>This site appears to use a scroll-linked positioning effect. This may not work well with asynchronous panning; see <a href="https://firefox-source-docs.mozilla.org/performance/scroll-linked_effects.html" rel="nofollow noreferrer">https://firefox-source-docs.mozilla.org/performance/scroll-linked_effects.html</a> for further details and to join the discussion on related tools and features!</p>
</blockquote>
<p>I tried to read through this article that mozilla warning suggested <a href="https://firefox-source-docs.mozilla.org/performance/scroll-linked_effects.html" rel="nofollow noreferrer">here</a></p>
<p>Tried to comment out other code, so I can be sure that the issue is here</p>
 

Latest posts

ن
Replies
0
Views
1
نعمان منذر محمود الجميلي
ن
Top