Firefox下CSS动画卡顿、自定义滚动条样式不生效问题求助

现有给animation、transform等属性加-moz-前缀的操作对新版Firefox完全无效，这些属性早在Firefox 16之后就不需要厂商前缀支持，冗余前缀甚至会增加CSS解析开销，完全没必要保留，卡顿问题可按以下方向排查修复：

• 给执行动画的Logo元素添加will-change: transform, opacity，主动告知浏览器提前为该元素分配独立渲染层，避免动画运行时频繁触发重排、重绘导致掉帧
• 检查动画关键帧内的属性改动：不要在动画中修改width、height、margin、top、left这类会触发布局计算的属性，所有位移、缩放、旋转效果统一用transform属性实现，透明效果用opacity实现，这两类属性可直接在GPU合成线程处理，不会占用主线程资源
• 如果动画元素叠加了大半径box-shadow、高模糊度filter: blur()效果，可给动画元素加transform: translateZ(0)强制开启硬件加速，注意该属性仅加在实际执行动画的元素上，不要全局滥用避免占用过多显存
• 避免在动画中使用计算复杂度极高的自定义缓动函数，Firefox对部分高阶贝塞尔曲线的帧计算效率低于Chromium内核浏览器，可先替换为ease、linear等内置缓动函数测试卡顿是否消失。

你代码中写的::-moz-scrollbar系列伪元素是Firefox多年前废弃的试验性语法，正式版Firefox完全不支持该写法，修复方式如下：

• Webkit内核（Chrome/Edge/Opera/Safari）的::-webkit-scrollbar系列伪元素写法可以保留，仅需补充Firefox专属的标准滚动条属性即可，正确代码如下：

/* Webkit内核浏览器兼容样式 */
html::-webkit-scrollbar {
  width: 10px;
}

html::-webkit-scrollbar-track {
  background-color: white;
}

html::-webkit-scrollbar-thumb {
  background: var(--colorMain);
}

/* Firefox 专属滚动条样式，无需使用伪元素 */
html {
  /* 滚动条宽度，新版Firefox支持直接写长度值，老版本可替换为thin实现近似10px的效果 */
  scrollbar-width: 10px;
  /* 第一个值为滑块颜色，第二个值为轨道颜色 */
  scrollbar-color: var(--colorMain) white;
}

注意：Firefox目前没有提供类似Webkit内核的伪元素接口来调整滚动条圆角、边框、悬浮交互效果，仅支持通过上述两个属性调整滚动条宽度和基础配色。

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