ios safari 从未实现 background-attachment: fixed，是 apple 主动放弃而非性能不足；::before + position: fixed 是当前最可靠替代方案，需 content、全向定位、z-index: -1 和 pointer-events: none。
iOS Safari 从初版起就根本没实现 background-attachment: fixed，不是 bug，是明确砍掉的功能。你写的样式在 DevTools 里显示为 fixed，但渲染层压根不走固定背景路径，静默降级为 scroll，视觉上完全没区别。
为什么 iOS 完全不支持这个值？
这不是性能“跟不上”，而是 Apple 主动、长期、跨版本的一致决策：固定背景要求每帧重绘全视口尺寸的图层，对移动端 GPU 合成压力大，易引发卡顿、内存泄漏和手势冲突。即使 iPhone 12 Pro 性能远超老款 PC，iOS Safari 仍拒绝实现——它连 CSS.supports('background-attachment', 'fixed') 都返回 true（假阳性），但实际不渲染。
常见错误现象包括：
- 横竖屏切换后背景拉伸、错位或闪白
- 键盘弹出时背景突然偏移或消失
- 用
getComputedStyle(el).backgroundAttachment检查，返回"fixed"，但滚动时图层完全不动态更新
哪些“修复尝试”注定无效？
所有试图保留原生 background-attachment: fixed 的做法，在当前 iOS（包括 iOS 17+）和主流安卓 WebView 上都不可行：
- 加
-webkit-background-attachment: fixed：iOS 不认，安卓忽略 - 给父元素加
transform: translateZ(0)或will-change: transform：可能触发新层叠上下文，让定位基准错乱，甚至更糟 - 改
的overflow或transform：不影响禁用逻辑，纯属白忙 - 用 JS 监听
scroll动态改background-position：不节流必卡；用window.scrollY在 sticky 场景下计算偏移不准；快速滚动时跳变明显
::before + position: fixed 是目前最稳的替代写法
绕过被砍掉的渲染机制，把背景图挪到伪元素上，再让它脱离文档流固定在视口——所有现代 iOS 版本都支持 position: fixed，且可控性高。
关键实操点：
-
::before必须有content: ""，否则不渲染 - 必须用
top: 0; right: 0; bottom: 0; left: 0铺满视口，width: 100%; height: 100%在横竖屏切换时容易错位 -
z-index: -1是硬性要求，否则遮挡全部可点击区域 - 加
pointer-events: none，避免拦截滚动和点击事件 - iOS 17+ 滚动初帧常抖一下：给伪元素加
backface-visibility: hidden，强制走稳定 GPU 合成路径
真正要注意的复杂点
替代方案代码本身不难，难点在于 Safari 对合成层的策略越来越细粒度：比如 contain: paint 或 content-visibility: auto 会让 position: fixed 伪元素直接失效；某些 iOS 版本对 JS 动态插入的伪元素不触发重绘；键盘弹出后伪元素位置可能漂移。这些都不是你 CSS 写错了，而是得主动适配 Safari 的 GPU 合成节奏——比如结构必须初始 HTML 就写好，不能靠 JS 插入；clip-path: inset(0) 比 overflow: hidden 更安全；vw/vh 单位比百分比更可靠。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
