background-attachment: fixed在移动端根本无效，必须用::before伪元素+position: fixed替代；需设content: ""、四边为0、z-index: -1、pointer-events: none，并避开overflow: hidden等干扰。
background-attachment: fixed 在移动端根本不会生效——不是你写错了，是 iOS Safari 和主流安卓 WebView 主动禁用它。必须换方案，不能靠加前缀、加 transform 或改 body 样式来“修复”。
为什么伪元素 ::before + position: fixed 是唯一可靠路径
浏览器砍掉的是 background-attachment 这个渲染行为本身，但 position: fixed 仍被完整支持。把背景图挪到 ::before 上，再让它自己 position: fixed，就绕开了被阉割的机制。桌面端直觉里“给元素设 fixed 背景”在移动端不存在，只有“让一个图层固定在视口”，而伪元素是最轻量、无需 JS 的实现方式。
伪元素必须满足的硬性条件
漏掉任意一条，iOS 上就会错位、被裁、或完全不固定：
-
::before必须有content: ""，否则不渲染 - 四边定位缺一不可：
top: 0; right: 0; bottom: 0; left: 0;（只写width: 100%; height: 100vh在 iOS 会偏移） -
z-index: -1是必须的，否则遮挡所有点击和滚动 - 加
pointer-events: none，否则拦截下方交互 -
background-size: cover和background-position: center center必须配对，横竖屏切换才稳
父容器常见的致命干扰项
伪元素写对了，但还是随页面滚动？大概率是这些地方踩了坑：
- 父容器用了
overflow: hidden—— 伪元素会被裁切，得把::before提到直接子级 - 父容器用了
contain: paint或content-visibility: auto——position: fixed失效，必须移除或提级 - 父容器同时有
border-radius和overflow: hidden—— 改用clip-path: inset(0)替代 - 伪元素上加了
transform、filter或opacity —— 触发新层叠上下文，fixed 定位基准错乱
iOS 17+ 的抖动与位置漂移怎么压住
Safari 对 position: fixed 伪元素的 GPU 合成更激进，刚滚动时“抖一下”，键盘弹出后背景偏移：
- 给伪元素加
backface-visibility: hidden，强制走稳定合成路径 - 避免 JS 动态插入结构（比如
document.createElement），某些 iOS 版本不触发重绘 —— 初始 HTML 就得写死::before - 如果需要轻微视差（背景动得比内容慢），别碰
background-attachment，改用transform: translateY()+requestAnimationFrame节流监听window.scrollY
真正难的不是写出那几行 CSS，而是接受：移动端没有“固定背景”这个原语。每一步都要对齐 Safari 的渲染逻辑，而不是桌面端的直觉。稍一偏离，就是错位、抖动、或彻底失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
