background-attachment: fixed 在移动端完全失效，因 iOS Safari 和安卓 WebView 主动禁用该属性以保障性能；推荐用 ::before 伪元素或独立 div 模拟 fixed 背景，需严格遵循 position: fixed、100vw/vh、z-index: -1 等规则。
它在移动端根本不会生效——这不是你代码写错了，是 iOS Safari 和所有主流安卓 WebView（Chrome 84+、微信、QQ、Samsung Internet）主动禁用该属性，且不报错、不警告，静默降级为 scroll。别浪费时间加前缀或调 transform: translateZ(0)，那些都无效。
为什么 background-attachment: fixed 在移动端完全失效
浏览器这么做是硬性性能策略：每次滚动都要重绘全视口尺寸的背景图，移动端 GPU 和内存扛不住。iOS Safari 从初版起就彻底忽略该声明；安卓 Chrome 自 v56 起默认禁用，WebView 更是直接跳过渲染逻辑。你能在 DevTools 里看到声明值是 fixed，但 computed 值永远是 scroll，Layers 面板里也找不到对应图层。
常见现象包括：
-
background-attachment: fixed在桌面 Chrome 正常，一上真机就跟着滚 - 横竖屏切换后背景拉伸、错位甚至闪白
- 给
body或html设置，iOS Safari 直接无视 - 加
-webkit-background-attachment: fixed或will-change: transform不仅没用，还可能触发意外层叠上下文
用 ::before 伪元素模拟 fixed 背景（最轻量且稳定）
这是目前兼容性最好、无需 JS、不依赖框架的落地方案。核心是把背景图从元素自身剥离，用伪元素创建独立合成层。
立即学习“前端免费学习笔记（深入）”；
实操要点：
- 必须用
::before或::after，不能用普通子元素——否则无法保证层级和定位基准 -
content: ""必须显式声明，否则伪元素不渲染 - CSS 必须包含：
position: fixed、top: 0、left: 0、width: 100vw、height: 100vh、z-index: -1、pointer-events: none - 必须用
vw/vh，不能用100%——否则伪元素会随父容器缩放，失去“视口固定”语义 - 若页面存在横向滚动，
width: 100vw可能截断，可改用min-width: 100vw
示例：
.parallax-section::before {
content: "";
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-image: url("hero.jpg");
background-size: cover;
background-position: center;
z-index: -1;
pointer-events: none;
}
用独立 <div> 模拟 fixed 背景（结构可控时首选）
<p>当项目允许修改 HTML 结构，这个方案比伪元素更易调试、更少受父级样式干扰，尤其适合全局背景。</p>
<p>关键约束：</p>
<ul><li>
<code><div class="bg-fixed"></div> 必须是 <main></main>、<div class="container"> 等任何 wrapper 里
<li>CSS 必须含：<code>position: fixed、top: 0、left: 0、width: 100vw、height: 100vh、z-index: -1、pointer-events: none
body 设了 overflow-x: hidden，必须同步加到 .bg-fixed 上，否则横屏时背景被裁background-size: cover + background-position: center，避免拉伸变形注意：z-index: -1 是硬性要求，漏掉就会遮挡所有可点击区域。
哪些“修复尝试”注定失败
所有试图保留 background-attachment: fixed 的做法，在当前环境下基本无效：
- 加
-webkit-前缀：iOS Safari 不认，安卓 WebView 忽略 - 给父元素加
transform: translateZ(0)：不解决失效问题，反而可能创建新定位上下文，让其他 fixed 元素也退化 - 用 JS 监听
scroll动态改background-position：不节流会卡顿；用window.scrollY在position: sticky容器里计算不准 - @supports 检测：只能用于渐进增强，不能作为主方案，因为移动端永远不支持
真正容易被忽略的复杂点是 Safari 对合成层越来越激进：iOS 17+ 滚动初帧常“抖一下”，键盘弹出后伪元素位置漂移，某些版本对 JS 动态插入的 ::before 不触发重绘——这些不是 CSS 写错了，而是你得主动对齐 Safari 的 GPU 合成策略，比如加 backface-visibility: hidden。
