background-attachment: fixed 在现代 css 中常因父容器存在 transform、perspective、filter 或 will-change 而被浏览器静默降级为 scroll；替代方案包括 position: sticky、calc() 配合 background-position 实现纯 css 视差，或使用 scroll-driven animations（chrome 115+），ios safari 则需特殊处理避免错位。
background-attachment: fixed 在现代 CSS 中为什么经常失效
因为 background-attachment: fixed 在父容器有 transform、perspective、filter 或 will-change 时会被强制降级为 scroll，浏览器会静默忽略 fixed 行为。
- 常见触发场景：用
transform: translateZ(0)强制硬件加速的容器、带filter: blur(1px)的卡片、Vue/React 框架中被transition-group包裹的区域 - 检查方法：在 DevTools 中选中元素 → 查看 Computed → 搜索
background-attachment，如果显示scroll却写了fixed，基本就是被覆盖了 - 替代思路：不用
fixed，改用position: sticky+ 背景图定位控制，或 JS 监听scroll动态更新background-position
用 background-position 实现轻量级视差（无 JS）
纯 CSS 视差本质是让背景移动速度 ≠ 内容滚动速度，关键靠 background-attachment: scroll 配合不同 background-position 的计算值。
- 核心公式：
background-position: center calc(50% + [滚动距离] * 0.3)—— 系数0.3控制视差强度，越小越“远”，越大越“近” - 必须配合
background-repeat: no-repeat和background-size: cover，否则位移会拉伸或重复 - 注意单位：
calc()里不能混用vh和px，推荐统一用%或vw/vh；滚动距离用100vh做基准较稳 - 示例：
background-position: center calc(50% + 0.2 * (100vh - 100%))—— 这个写法在 Safari 15.4+ 才支持，旧版需 JS fallback
scroll-driven animations 替代传统视差（Chrome 115+）
原生滚动动画 API 是目前最可控的方案，但兼容性仍是硬门槛；它不依赖 background-attachment，也不吃性能。
- 关键配置：
@keyframes定义位移，animation-timeline: scroll()绑定滚动轴，animation-range控制触发区间 - 必须加
contain: layout style paint到滚动容器，否则动画可能卡顿或跳帧 - 当前限制：仅支持 Y 轴滚动驱动；
scroll()默认绑定最近的可滚动祖先，无法指定特定容器（除非用scroll(anchor)语法，但尚未广泛支持） - 简单起手：
section { animation: parallax 1 linear; animation-timeline: scroll(y); animation-range: entry 0% exit 100%; } @keyframes parallax { from { background-position-y: 0; } to { background-position-y: -100px; } }
移动端 iOS Safari 的背景图错位问题
iOS Safari 渲染 background-attachment: fixed 时，常出现背景图随页面缩放/回弹抖动，甚至整个背景偏移出视口。
立即学习“前端免费学习笔记（深入）”；
- 根本原因：iOS WebKit 对 fixed 背景使用独立图层，但该图层未跟随 viewport 缩放重绘
- 临时缓解：给
body加-webkit-overflow-scrolling: touch（仅 iOS 7–12），或强制background-size: 100% 100%+background-position: 0 0重置 - 更可靠做法：检测
navigator.userAgent.includes('iPhone') || navigator.platform === 'iPad'，对 iOS 设备直接禁用 fixed，改用 JS 方案或简化背景 - 注意：iOS 16.4 后部分机型开始支持
scroll-timeline，但background-position动画仍存在 1–2 帧延迟，别指望像素级同步
实际做下来你会发现，所谓“简单背景关联”，最难的不是写那几行 CSS，而是判断当前滚动上下文是否被框架、动画库或隐式 transform 意外污染。很多视差失效，根本没报错，只是 background-attachment 在 computed 里悄悄变成了 scroll。
