Firefox中Intersection Observer触发的CSS动画卡顿故障问题

我通过Intersection Observer API实现了网站头部Logo的显示/隐藏逻辑：当Logo处于非背景图区域（或接近该区域）时隐藏。这个功能在Google Chrome、其他Chromium内核浏览器及移动端Safari中运行正常，但在Firefox 132.0.1（64位）中，CSS动画出现严重卡顿、延迟，甚至偶尔直接冻结。

注意：不通过Intersection Observer动态添加类时，CSS动画显示完全正常（比如示例中默认带有fade-in类的蓝色方块，刷新页面时淡入动画流畅）。

复现代码 #

我制作了简化示例，用蓝色方块模拟头部Logo，红色矩形模拟背景图区域：

HTML

<div class="container">
  <div class="headerhide" id="headerhide">
    <div class="logo-container">
      <div class="logo"></div>
    </div>
  </div>
  <div class="header-background" id="region"></div>
</div>

CSS

.header-background {
  height: 500px;
  background-color: red;
}

.logo-container {
  position: fixed;
  top: 2%;
  left: 50%;
  transform: translate(-50%, 0);
  width: 80px;
  height: 80px;
  background-color: blue;
}

.logo.logo-container {
  position: absolute;
}

.container {
  height: 2000px;
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

.fade-in {
  opacity: 0;
  animation-name: fade-in;
  animation-duration: 0.4s;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;
}

.fade-out {
  opacity: 1;
  animation-name: fade-out;
  animation-duration: 0.2s;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;
}

JavaScript

const header = document.getElementById("headerhide");
const region = document.querySelector(".header-background");

const observer = new IntersectionObserver(([entry]) => {
  header.classList.toggle("fade-out", !entry.isIntersecting);
  header.classList.toggle("fade-in", entry.isIntersecting);

}, {
  threshold: 0.2,
})
observer.observe(region)

设备与环境 #

• 系统：Windows 11 Home 64位
• 硬件：Intel Core i7-8750H、NVIDIA RTX 2070、16GB内存
• 问题在不同设备上均能复现

已尝试的无效解决方案 #

• 禁用Firefox的privacy.fingerprintingProtection和Firefox Sync
• 为CSS类添加will-change: opacity;
• 添加轻微transform动画或translateZ(0)触发硬件加速
• 为JavaScript回调添加防抖处理
• 使用两个独立的Intersection Observer分别切换不同类
• 在全新Firefox开发者版中测试
• 改用CSS transitions替代keyframes动画

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