background-attachment: fixed 在移动端失效是因为 iOS Safari 和安卓 WebView 主动禁用该属性以避免滚动卡顿；替代方案是用 position: sticky 模拟或改用 background-attachment: local。
background-attachment: fixed 为什么在移动端失效
直接说结论：background-attachment: fixed 在 iOS Safari 和大多数安卓 WebView 中默认被忽略，不是你写错了，是浏览器主动禁用的。这是因为固定背景会强制触发全页面重绘，严重拖慢滚动性能，所以 iOS 从很早开始就把它当作“可降级特性”处理。
常见现象：PC 浏览器看着好好的，一上手机，背景图跟着一起滚；DevTools 里明明看到样式生效了，但就是不动——这是预期行为，不是 bug。
- Android Chrome 84+ 默认禁用
background-attachment: fixed（除非页面有transform: translateZ(0)或will-change: transform等触发硬件加速的 hack） - iOS Safari 完全不支持该值用于
<body>或<html>，对普通容器元素支持也极不稳定 - 即使强行启用，也容易导致滚动卡顿、内存暴涨，尤其在长页面中
替代方案：用 position: sticky 模拟固定背景效果
真正可靠的做法是脱离背景图本身，改用一个独立的、尺寸撑满视口的 <div> 层，再用 position: sticky + top: 0 让它“粘”在视口顶部，视觉上等效于固定背景。
关键点在于：这个层必须和滚动容器同级（通常挂载在 <body> 下），且不能被父级 overflow: hidden 截断。
立即学习“前端免费学习笔记（深入）”；
<body> <div class="bg-fixed-placeholder"></div> <main class="content">...</main> </body>
.bg-fixed-placeholder 样式示例：
.bg-fixed-placeholder {
position: sticky;
top: 0;
width: 100vw;
height: 100vh;
background-image: url('bg.jpg');
background-size: cover;
background-position: center;
z-index: -1;
pointer-events: none;
}
-
pointer-events: none防止遮挡下方内容的点击 -
z-index: -1确保它在内容层之下 - 如果页面有头部吸顶栏，需调整
top值避开，比如top: 60px
更轻量的选择：background-attachment: local
如果你只是想让背景图“相对自身容器滚动”，而不是真要“钉死在视口”，background-attachment: local 是更可控、兼容性更好的选择。
它会让背景图随容器内容滚动，但始终贴着容器内边框显示（不像 scroll 那样可能露出空白），适合卡片、列表项等局部区域。
.card {
background-image: url('pattern.png');
background-attachment: local;
background-repeat: repeat;
overflow-y: auto;
height: 300px;
}
- 只在容器有滚动条且内容溢出时才体现差异
- 所有现代浏览器都支持，包括 iOS Safari
- 比
fixed更节省内存，无性能隐患
别踩坑：慎用 transform 强制启用 fixed
网上有些方案建议给 <body> 加 transform: translateZ(0) 来“唤醒” fixed，这确实能在部分 Android Chrome 上起效，但代价很大：
- 触发整个页面的图层提升，显著增加 GPU 内存占用
- 可能破坏原有
position: fixed元素（如 toast、modal）的定位逻辑 - iOS 上依然无效，且未来版本可能进一步限制
- CI/CD 中的 Puppeteer 或 Playwright 截图会因图层异常而白屏
除非你明确知道目标设备型号、系统版本、WebView 内核，并做过真机压测，否则不要把它当通用解法。
固定背景图的“固定”，本质是视口锚定，而移动端的视口模型和滚动机制与桌面端不同——接受这个差异，比硬套桌面方案更省时间。
