background-attachment: fixed 在移动端根本无效，是 ios safari 和主流安卓 webview（chrome 84+、微信、qq 等）为保障滚动性能主动禁用的策略；应改用 body::before + position: fixed 方案，须满足 content: ""、四边为 0、z-index: -1、pointer-events: none 等全部条件。
background-attachment: fixed 在移动端根本不会生效——这不是你代码写错了，是 iOS Safari 和所有主流安卓 WebView（Chrome 84+、微信、QQ、Samsung Internet）主动禁用该行为，属于明确的性能策略，不是 bug，也无法通过加前缀或 hack 修复。
为什么浏览器要砍掉 background-attachment: fixed
固定背景要求每帧重绘整个视口尺寸的背景图，对移动设备的 GPU 和内存压力极大。为保滚动顺滑、续航稳定和内存可控，iOS Safari 从初版起就完全不实现该逻辑；安卓阵营自 Chrome 84 起统一静默降级为 scroll，连渲染层都不创建（DevTools 的 Layers 面板里查不到对应图层）。
常见现象包括：
-
background-attachment在 DevTools Computed 样式中显示为scroll，哪怕你写了fixed - 桌面端正常，真机一滚动背景图立刻跟随内容移动
- 横竖屏切换后背景拉伸、错位或短暂闪白
- 加
-webkit-background-attachment: fixed或transform: translateZ(0)完全无效，还可能触发意外层叠上下文
哪些 CSS 属性会让 fixed 静默失效
只要 body 或其任意祖先元素设置了以下任一属性，background-attachment: fixed 就会被强制当作 scroll 处理：
-
transform（哪怕只是transform: translateZ(0)） -
filter（含filter: none） -
will-change（如will-change: transform） -
perspective或backface-visibility -
overflow: auto或overflow: hidden配合position: relative的父容器
尤其要注意：很多项目为“硬件加速”在 body 上加了 transform: translateZ(0)，这会直接废掉固定背景。
为什么 position: sticky 里的 fixed 不起作用
当父容器用了 position: sticky，子元素设 background-attachment: fixed 的参考系会变成该 sticky 容器，而非视口——这是 CSS 规范定义的行为，不是浏览器兼容问题。
典型场景：导航栏吸顶后，下方 banner 图片本想“固定”，结果随页面一起滚动。根本原因是 fixed 的参考系是最近的「分隔容器」，而 sticky 元素会创建这样一个边界。
解决办法只有两个：
- 去掉父级
sticky - 放弃
fixed，改用 JS 驱动的background-position动态计算（注意用getBoundingClientRect()而非window.scrollY，避免因 sticky 偏移导致计算偏差）
真正跨端稳定的替代方案：body::before + position: fixed
这是目前兼容性最好、无需 JS、能覆盖 iOS 15+ 和安卓主流 WebView 的方案，但必须满足全部条件才能真正生效：
-
body { margin: 0; }——否则伪元素会因默认外边距错位一像素 -
body::before必须有content: ""，否则不渲染 - 必须设
top: 0; right: 0; bottom: 0; left: 0;（只写width: 100%; height: 100vh在 iOS 横屏时可能漏边） -
z-index: -1是硬性要求，否则遮挡所有点击和滚动 - 加
pointer-events: none，避免拦截下方内容交互 - 父容器不能有
overflow: hidden、contain: paint或content-visibility: auto，否则伪元素会被裁切或失效
容易被忽略的复杂点在于：Safari 对合成层的处理越来越激进。iOS 17+ 滚动初帧常“抖一下”，键盘弹出后伪元素位置可能漂移，甚至某些版本对 JS 动态插入的 ::before 不触发重绘——这些都不是 CSS 写错了，而是你得主动对齐 Safari 的 GPU 合成策略，比如加 backface-visibility: hidden。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
