Mozilla Firefox浏览器中Header组件滚动抖动问题排查

问题描述 #

• 基于Stencil.js开发的Header组件，支持正常状态与随滚动切换的isScroll状态
• 仅Firefox浏览器中滚动页面时，Header会出现抖动、上下跳动现象，约2秒后才稳定到预期位置；Chrome、Edge、Opera浏览器无此异常
• 触发window的scroll事件时，会执行节流后的applyScrollBehaviorThrottled函数，注释该函数后异常消失
• Firefox控制台弹出警告：

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!

原问题代码 #

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();
}

问题原因 #

Firefox采用异步滚动机制，50ms的节流延迟会导致Header的状态更新与浏览器滚动动作不同步。加上每次scroll事件中读取offsetHeight会触发布局回流，进一步加剧状态更新的滞后，最终引发视觉上的抖动。

解决方案 #

1. 用requestAnimationFrame替代节流 #

让状态更新与浏览器重绘周期同步，避免延迟导致的不同步

2. 缓存布局属性，避免重复读取 #

提前缓存眉栏高度，并用ResizeObserver监听高度变化，减少回流

3. 简化scroll事件处理逻辑 #

修改后的代码示例 #

private eyebrowHeight: number = 0;
private ticking: boolean = false;

componentDidLoad() {
  // 初始化缓存眉栏高度
  const eyebrowEl = this.el.querySelector("qds-web-header-eyebrow");
  if (eyebrowEl) {
    this.eyebrowHeight = eyebrowEl.offsetHeight;
    // 监听眉栏高度变化
    new ResizeObserver(() => {
      this.eyebrowHeight = eyebrowEl.offsetHeight;
    }).observe(eyebrowEl);
  }
}

@Listen("scroll", { target: "window" })
public applyScrollBehavior(): void {
  if (!this.ticking) {
    window.requestAnimationFrame(() => {
      this.updateHeaderScrollState();
      this.ticking = false;
    });
    this.ticking = true;
  }
}

private updateHeaderScrollState(): void {
  const { scrollY } = window;
  this.isAtTop = scrollY === 0;
  state.isScroll = this.preventCollapse ? false : scrollY > this.lastScrollTop;
  this.lastScrollTop = scrollY;
}

说明 #

• requestAnimationFrame确保状态更新在浏览器即将重绘时执行，完美贴合滚动节奏
• 缓存eyebrowHeight并通过ResizeObserver监听变化，避免每次scroll都触发布局计算
• 用ticking标记防止同一帧内多次执行更新逻辑，优化性能

内容的提问来源于stack exchange，提问作者Amine Zouari