background-attachment: fixed 在移动端完全失效，是 ios safari 早期废弃、android chrome 84+ 及微信/qq webview 主动禁用所致；桌面端虽可用但存在闪动、错位与卡顿隐患，不可用于跨端生产环境。
background-attachment: fixed 在移动端根本不起作用——不是你写错了，是 iOS Safari 早废弃、Android Chrome 84+ 及微信/QQ WebView 全部主动禁用。桌面端虽能用，但存在闪动、错位、性能卡顿等隐患，不能直接用于跨端生产环境。
为什么 background-attachment: fixed 在手机上完全失效
这不是 bug，是浏览器的主动策略：为避免滚动卡顿和内存暴涨，iOS Safari 从早期就彻底屏蔽该值对 body 和 html 的作用；Android Chrome 自 v84 起默认忽略，微信、QQ、安卓原生 WebView 全部跟随。DevTools 里样式明明“生效”，背景图却照常滚动；控制台不报错，也查不到原因。
常见现象包括：
- 页面一滚动，背景图立刻跟着动，或显示为纯色
- 缩放、切 Tab、软键盘弹出后，背景图短暂消失或偏移
- 加
-webkit-background-attachment: fixed或transform: translateZ(0)基本无效，还可能引入新层叠上下文导致更难排查
用 position: fixed + 独立 div 模拟固定背景（最稳妥）
核心是把背景图从内容流中抽离，用一个脱离文档流的 <div> 全屏覆盖并压在最底层。HTML 必须把背景层放在 <code> 最外层，和 <main></main> 同级：
<div class="bg-fixed"></div> <main class="content"></main>
CSS 关键项不能漏：
-
position: fixed是基础，必须配合top: 0; left: 0; -
width: 100vw; height: 100vh;—— 用vw/vh而非%，避免受父容器尺寸干扰 -
z-index: -1是硬性要求，设成 0 或正数会盖住所有点击区域 - 若页面有
body { overflow-x: hidden }，记得同步加到.bg-fixed上，否则横屏时可能溢出 - 如果页面有
position: fixed的 header，别调低它的z-index，而是给它加background: rgba(255,255,255,0.95)让背景“透出”
background-size 选 cover 还是 100% 100%
background-size: cover 看起来更“专业”，但它是性能陷阱：每次滚动都可能触发重采样，尤其在低端 Android 设备上卡顿明显。
- 优先用
background-size: 100% 100%，强制拉伸、无缩放计算，GPU 压力小 - 如果必须保持宽高比，用
cover时务必控制图片分辨率——不超过 2x 视口宽高（比如最大750px × 1334px） - 避免同时用
background-position: center+cover，这会让浏览器在滚动中反复居中裁剪，加剧重绘 - 可加
will-change: transform提升合成效率，但仅限该元素本身，别全局滥用
为什么不能只靠 height: 100vh + overflow: hidden
height: 100vh 单独用在 body 或 html 上无法可靠实现全屏背景图且无滚动条——它既不解决默认 margin 留白，也不保证背景图真正覆盖整个视口，还可能在移动端触发意外滚动或裁剪。
-
body默认有margin（通常 8px），且高度由内容撑开，height: 100vh只覆盖“内容区域”，而非整个屏幕 -
overflow: hidden不是让页面“不滚动”的正确逻辑：它只是强行隐藏滚动条并截断溢出区域，文字超出视口看不见、表单焦点无法滚动到、屏幕阅读器跳过被裁内容 - iOS Safari 中，软键盘弹出会推高视口，但
100vh不更新，导致背景图被顶出、内容不可见 - 真正要覆盖全屏，背景图应绑定到
html元素，并配background-size: cover；是否滚动应由 JS 动态控制，而非 CSS 硬设overflow: hidden
最容易被忽略的一点：全屏背景和滚动控制是两件事。背景图铺满靠的是元素尺寸 + background-size + 定位；是否滚动靠的是内容高度与容器 overflow 的组合——混在一起硬塞 height: 100vh + overflow: hidden，等于用胶带修发动机。
