iOS Safari 从初版起就明确不支持 background-attachment: fixed，会静默降级为 scroll；Android Chrome 也存在兼容性问题，推荐用 ::before 伪元素 + position: fixed 替代，并注意 z-index、clip-path、backface-visibility 等关键细节。
background-attachment: fixed 在 iOS 上根本不会生效
不是你写错了，也不是漏了 -webkit- 前缀，iOS Safari（包括所有 WebKit 内核的 iOS 浏览器）从初版起就**明确不实现** background-attachment: fixed。它会静默降级为 scroll，控制台零提示，DevTools 里也看不出异常——你看到背景跟着滚，就是它本该的样子。
Android Chrome 虽部分支持，但在复杂布局、缩放、快速滚动时也常退化。别把它当跨端可用特性，更别用 CSS.supports('background-attachment', 'fixed') 做兼容判断——这在 iOS 上返回 true，但实际无效，属于“假阳性”。
为什么伪元素 + position: fixed 是目前最稳的替代方案
移动端禁用的是 background-attachment 这个行为本身，但 position: fixed 所有现代浏览器都支持。把背景图挪到 ::before 伪元素上，再让它 position: fixed，就绕开了被砍掉的机制。
关键实操点：
-
::before必须设top: 0; left: 0; right: 0; bottom: 0;才能铺满视口，只写top: 0; left: 0; width: 100%; height: 100%;在横竖屏切换时容易偏移 -
z-index: -1是必须的，否则盖住全部内容；但若父容器有overflow: hidden，伪元素会被裁切——改用clip-path: inset(0) - 避免给伪元素加
transform或filter，否则可能触发新层叠上下文，导致定位漂移 - 动态 JS 插入的伪元素（比如
el.style.setProperty('--bg', url)）在某些 iOS 版本里不重绘，建议初始 HTML 就写好结构
iOS 17+ Safari 的新坑：fixed 伪元素滚动时“抖一下”
新版 Safari 对 position: fixed 伪元素的合成更激进，刚滚动或缩放后常出现位置跳变、轻微抖动。这不是 bug，是 GPU 合成策略变化带来的副作用。
缓解手段很具体：
- 给伪元素加
backface-visibility: hidden，强制走更稳定的合成路径 - 避开
border-radius+overflow: hidden组合包裹伪元素容器，否则背景图边缘会被意外裁切 - 如果父容器用了
contain: paint或content-visibility: auto，fixed会直接失效——得把伪元素提到直接子级 - 别依赖
background-size: cover单独使用，必须配对background-position: center center，否则横竖屏切换插值计算有微小误差
需要视差效果？别碰 background-attachment，用 JS + transform 控制
纯 position: fixed 是绝对固定，但设计稿常要“背景动得比内容慢”这种轻微视差。这时不能靠 background-attachment，得用 JS 动态控制伪元素的 transform: translateY()。
注意性能红线：
- 监听
scroll事件必须用requestAnimationFrame节流，否则快速滚动直接卡顿 - 偏移量建议用
window.scrollY * 0.2这类系数，别超0.5，否则视觉失真 - 系数不是越大越好——iOS 上超过
0.3就容易触发合成层重排，反而更卡
最易被忽略的一点：所谓“固定背景”，在移动端本质是妥协方案。它没有标准解，只有根据目标 iOS 版本、是否允许 JS、是否接受轻微视差等条件做的取舍。写死 background-attachment: fixed 的那一刻，就已经在移动端放弃了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
