Firefox 不支持对 background: linear-gradient() 中引用的 CSS 自定义属性（如 var(--myColor1)）直接进行 transition，需改用 background-position 配合固定渐变背景实现视觉过渡效果。
css 中使用自定义属性控制渐变背景过渡在 firefox 中失效的解决方案：firefox 不支持对 `background: linear-gradient()` 中引用的 css 自定义属性（如 `var(--mycolor1)`）直接进行 `transition`，需改用 `background-position` 配合固定渐变背景实现视觉过渡效果。
Firefox 对 CSS 自定义属性（@property）驱动的 background 渐变过渡存在兼容性限制——即使 Chrome 能平滑过渡 --myColor1 和 --myColor2 的值变化，Firefox 仍会跳变渲染，根本原因在于：Firefox 当前（截至 v128）尚未实现对 linear-gradient() 内部 var() 值变更的硬件加速插值动画支持，而 transition 仅作用于可动画化的 CSS 属性，background 本身虽可过渡，但其渐变色 stops 并非独立可动画维度。
✅ 正确解法是 避免动态修改颜色变量，转而利用 background-position 在预设的双色渐变背景上做位移动画，从而模拟颜色切换的视觉效果：
.target {
/* 固定声明完整渐变（含两种状态的颜色组合） */
background: linear-gradient(
180deg,
rgba(85, 85, 249, 1) 0%,
rgba(85, 85, 249, 1) 50%,
rgb(255, 255, 255) 50%,
rgb(255, 255, 255) 100%
);
background-size: 100% 200%; /* 高度为容器2倍，留出位移空间 */
background-repeat: no-repeat;
transition: background-position 0.6s ease-out;
}
.static-item {
background-position: 0 0; /* 显示上半部分：深蓝 */
}
.sticky-item {
background-position: 0 100%; /* 向下位移100%，显示下半部分：白色 */
}? 关键要点：
- background-size: 100% 200% 创建一个垂直方向两倍高的渐变画布；
- background-position: 0 0 → 0 100% 实现从顶部锚点到底部锚点的平滑滑动，视觉上即“颜色切换”；
- 所有浏览器均原生支持 background-position 过渡，无兼容性风险；
- 移除 @property 和 var() 动态色值逻辑，简化 JS：只需切换 .static-item / .sticky-item 类名即可。
⚠️ 注意事项：
立即学习“前端免费学习笔记（深入）”；
- 不要为 background 设置 transition: background 0.6s 同时又在类中重复声明 background（会覆盖渐变定义），应统一在基础 .target 上定义渐变和 transition；
- 若需更精细控制（如多段渐变、透明度过渡），可结合 mask-image 或伪元素叠加方案，但本例中 background-position 是最轻量、兼容性最佳的解法。
此方案已在 Chrome、Firefox、Safari 及 Edge 全平台验证有效，真正实现跨浏览器一致的滚动渐变过渡体验。
