移动端不支持 background-attachment: fixed，需用 ::before 伪元素配合 position: fixed 实现近似效果，但须满足 content: ""、四边定位、z-index: -1、pointer-events: none 等条件，并规避 contain/paint、overflow: hidden、transform 等导致失效的因素。
移动端根本不存在 background-attachment: fixed 这回事——iOS Safari 和绝大多数安卓 WebView 从规范层面就不支持，不是你写错了，也不是加前缀能救的。必须换方案。
为什么伪元素 ::before 能绕过禁用
浏览器砍掉的是 background-attachment 这个渲染行为，但 position: fixed 是完整支持的定位机制。把背景图挪到伪元素上，再让它自己 position: fixed，就彻底跳过了被阉割的路径。
-
::before必须有content: ""，否则不渲染 - 四边定位缺一不可：
top: 0; right: 0; bottom: 0; left: 0;（只写top: 0; width: 100%; height: 100%;在 iOS 会错位） - 必须设
z-index: -1，否则盖住内容；但父容器不能有overflow: hidden，否则伪元素被裁掉 - 加
pointer-events: none，不然它会拦截所有点击和滚动事件
伪元素固定背景常见失效原因
伪元素写对了，但还是不固定？大概率是这些地方踩了坑：
- 父容器用了
contain: paint或content-visibility: auto—— 这会让position: fixed失效，得把::before提到<body>直接子级 - 父容器同时用了
border-radius和overflow: hidden—— 背景图会被意外裁切，改用clip-path: inset(0) - 伪元素上加了
transform、filter或opacity < 1—— 触发新层叠上下文，导致fixed定位基准错乱 - 图片尺寸依赖
background-size: cover—— 横竖屏切换时容易偏移，建议用width: 100vw; height: 100vh;配合显式aspect-ratio
iOS 17+ 和 Safari 的特殊抖动问题
不是 bug，是 Safari 对 position: fixed 伪元素的合成策略更激进：刚滚动时“抖一下”，缩放或键盘弹出后位置漂移。
立即学习“前端免费学习笔记（深入）”；
- 给伪元素加
backface-visibility: hidden，强制走更稳定的 GPU 合成路径 - 避免 JS 动态插入
::before结构（比如document.createElement），某些 iOS 版本不触发重绘，初始 HTML 就得写死 - 如果需要轻微视差（背景动得比内容慢），别碰
background-attachment，改用transform: translateY()+requestAnimationFrame节流监听window.scrollY
真正难的不是写出那几行 CSS，而是接受一个事实：移动端没有“固定背景”这个原语，只有靠伪元素 + 定位 + 合成控制拼出来的近似效果。每一步都得对齐 Safari 的渲染逻辑，而不是桌面端的直觉。
