ios safari 从初版起就明确不支持 background-attachment: fixed，会静默降级为 scroll；最稳定替代方案是 ::before + position: fixed，需设 content、铺满视口、z-index: -1、pointer-events: none，并注意 ios 17+ 的抖动问题。
background-attachment: fixed 在 iOS Safari 上根本不会生效
不是你漏写了 -webkit- 前缀，也不是 CSS 选择器没命中——iOS Safari（所有版本）从初版起就**明确不实现** background-attachment: fixed。它会静默降级为 scroll，控制台零提示，DevTools 里样式值仍显示为 fixed，但视觉上背景图必然跟着滚动。
Android Chrome 自 v56 起也默认禁用该行为；微信内置 WebView、QQ 浏览器等安卓定制内核甚至直接跳过解析，当无效声明处理。
- 这是浏览器主动做的性能策略，不是 bug：固定背景需每帧重绘全视口区域，对移动端 GPU 和内存压力过大
-
CSS.supports('background-attachment', 'fixed')在 iOS 上返回true，属于“假阳性”，不可用于兼容判断 - 即使套在
或上，照样失效；普通容器元素支持也极不稳定，不建议尝试
::before + position: fixed 是目前最稳的替代方案
移动端禁用的是 background-attachment 这个渲染行为本身，但 position: fixed 所有现代浏览器都支持。把背景图挪到 ::before 伪元素上，再让它 position: fixed，就绕开了被砍掉的机制。
-
::before必须有content: ""，否则不渲染 - 必须设
top: 0; right: 0; bottom: 0; left: 0;铺满视口；只写width: 100%; height: 100%在横竖屏切换时容易错位 -
z-index: -1是必须的，否则盖住全部内容；但若父容器有overflow: hidden，伪元素会被裁切——改用clip-path: inset(0) - 加
pointer-events: none，否则拦截点击和滚动事件 - 避免给伪元素加
transform、filter或will-change，否则可能触发新层叠上下文，导致定位漂移
iOS 17+ Safari 的新坑：fixed 伪元素滚动时“抖一下”
iOS 17+ 和 macOS 14+ 的 Safari 对 position: fixed 伪元素的 GPU 合成更激进，刚滚动或缩放后常出现位置跳变、轻微抖动。这不是 bug，是合成策略变化带来的副作用。
- 加
backface-visibility: hidden到伪元素上，能强制走更稳定的 GPU 合成路径 - 如果父容器用了
contain: paint或content-visibility: auto，fixed会直接失效——得把::before提到直接子级 - JS 动态插入的伪元素（比如
document.createElement）在某些 iOS 版本里不触发重绘，建议初始 HTML 就写好结构 - 背景图尺寸建议用
width: 100vw; height: 100vh;，而不是依赖background-size: cover—— 后者在横竖屏切换时更容易偏移
真正难的不是写对那几行 CSS
而是意识到：iOS 上没有“固定背景”这回事，只有“模拟固定”的权衡。你选 ::before + fixed，就得接受抖动风险；选 position: sticky，就得确保它挂载在 下且无 transform 干扰；用 @scroll-timeline，就得放弃旧版 Safari 支持。没有银弹，只有根据目标设备、性能预算和维护成本做的具体取舍。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
