background-attachment: fixed 在移动端失效是因 safari ios 和 chrome android 主动禁用该属性以提升滚动性能，并非 bug；应改用 js 配合 transform + scroll event 实现可控视差效果。
background-attachment: fixed 为什么在移动端失效
因为绝大多数移动浏览器（包括 Safari iOS 和 Chrome Android）默认禁用 background-attachment: fixed，这是为避免滚动性能问题和内存压力。它不是 bug，是主动限制。
- 只在桌面 Chrome/Firefox/Edge 中稳定生效；Safari macOS 15+ 后才逐步放宽
- 即使强制开启（如
-webkit-transform: translateZ(0)），也可能触发意外重绘或白屏 - 真正需要视差效果时，别硬扛这个 CSS 属性，换 JS 控制更可控
用 transform + scroll event 做轻量级视差位移
核心思路是监听 scroll 事件，读取 window.scrollY，再用 transform: translateY() 反向偏移背景层。比 background-attachment 兼容性好、行为可预测。
- 给要视差的元素加
will-change: transform，减少重排开销 - 用
requestAnimationFrame节流，避免高频触发导致卡顿 - 位移量建议控制在
scrollY * 0.2以内，过大容易失真或穿帮 - 示例关键逻辑：
element.style.transform = `translateY(${window.scrollY * 0.3}px)`;
background-position 的百分比值怎么配合滚动做视差
background-position: 0% 0% 是相对容器自身尺寸计算的，不是相对于视口——这点常被误解。它适合做“缓慢滑动”的背景偏移，但无法直接响应滚动距离。
- 必须搭配 JS 动态更新，比如：
element.style.backgroundPosition = `0% ${scrollY * 0.1}%` - 注意单位混用：
%和px不能共存于同一值中，否则整个声明会被忽略 - 如果背景图尺寸小于容器，
%行为会变得难预测，优先用px或rem更稳妥 - 频繁改
background-position比改transform性能差，尤其在低端设备上
视差层级错乱或闪烁的常见原因
不是动画写错了，往往是层叠上下文或合成策略没理清。最常踩的坑是父容器没设 transform 或 will-change，导致子元素视差层被强制合并进主文档流。
立即学习“前端免费学习笔记（深入）”；
- 确保视差元素有独立层：加
transform: translateZ(0)或will-change: transform - 避免在
position: fixed父容器里嵌套视差元素，容易触发渲染异常 - 多个视差层之间 z-index 冲突时，不要只靠数值，要检查它们是否同属一个层叠上下文
- iOS Safari 下偶发闪烁，大概率是 GPU 合成失败，加
-webkit-backface-visibility: hidden有时能缓解
事情说清了就结束。真正难的不是让背景动起来，而是动得稳、不抢主线程、在各种缩放和横竖屏切换下还保持位置关系。这些细节没法靠一个 CSS 属性兜底。
