background-attachment: fixed 在移动端必然卡顿，因 ios/android webview 依赖软件合成且无法 gpu 加速；应改用 position: fixed + ::before 伪元素方案，并优化图片格式、尺寸与解码性能。
直接结论：background-attachment: fixed 在移动端几乎必然卡顿，别用；真要固定背景，必须降级为 position: fixed + 伪元素方案。
为什么 background-attachment: fixed 在移动端卡顿
这不是 CSS 写错了，而是浏览器底层限制：iOS 和 Android 的 WebView / WKWebView 对 background-attachment: fixed 的实现依赖软件合成，无法启用 GPU 加速。滚动时每帧都要重采样、重定位背景图，尤其在高 DPR 屏幕（dpr=2/3）下，模糊+掉帧是常态。
常见错误现象包括：
- 滚动过程中背景图明显拖影或撕裂
- 键盘弹出后背景错位、拉伸
- Network 面板里背景图请求正常，但视觉上“卡住不动”
更关键的是：它和 transform、will-change 等属性冲突，一旦父容器用了 transform: translateZ(0) 或 opacity: 0.99，fixed 背景直接失效或渲染异常。
用 position: fixed + ::before 代替 background-attachment
这是目前兼容性最好、性能最稳的替代方案，所有现代移动端浏览器都支持，且可精准控制图层与尺寸。
正确写法要点：
- 外层容器设
position: relative，高度至少min-height: 100vh - 用
::before伪元素承载图片：position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-image: url(...); background-size: cover; background-position: center center; z-index: -1; - 必须加
z-index: -1，否则伪元素会遮挡内容 - 避免在伪元素上写
transform或filter，否则触发额外合成层
示例片段：
.hero-fixed {
position: relative;
min-height: 100vh;
}
.hero-fixed::before {
content: "";
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url(./bg.webp);
background-size: cover;
background-position: center center;
z-index: -1;
}
移动端必须做的配套优化
光换方案不够，背景图本身仍是性能瓶颈：
- 图片格式必须用
WebP或AVIF，单图体积压到150KB以内（非首屏可放宽至300KB） - 分辨率按最大设备 DPR 提供：比如 dpr=3 的 iPhone，提供
3x尺寸图，但用background-size: cover自动缩放 - 禁止在伪元素上写
animation或transition，哪怕只是opacity—— 滚动中触发动画会强制重绘整层 - 若需响应式适配，在媒体查询里直接切换
background-imageURL，别用 JS 动态改
最容易被忽略的一点：你看到的“卡”，80% 源于图片解码耗时，而非 CSS 层叠逻辑。打开 Chrome DevTools → **Rendering** 面板勾选 “FPS meter”，滚动时看帧率是否稳定在 55–60fps；如果掉到 30fps 以下，优先查图片解码时间（Performance 面板里的 “Decode Image” 任务）。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
