background-attachment: fixed 在移动端不可靠，iOS Safari（尤其15前）和部分Android WebView会忽略或退化为scroll；应放弃纯CSS方案，改用@supports检测、JS动态切换class、独立wrapper+100dvh、完整background声明及WebP压缩等降级策略。
background-attachment: fixed 在移动端根本不可靠
iOS Safari（尤其是 iOS 15 之前）和部分 Android WebView 会直接忽略 background-attachment: fixed，或强制退化为 scroll。这不是你 CSS 写错了，是浏览器限制——它不支持在 touch 滚动场景下维持固定背景的合成层。强行加 fixed 只会让图片错位、拉伸，甚至白屏。
必须放弃“纯 CSS 固定背景”幻想，改用降级方案：
- 用
@supports (background-attachment: fixed)包裹样式，让旧 Safari 和 IE 直接跳过 - 配合
@media (prefers-reduced-motion: reduce)主动禁用 fixed，避免卡顿 - 更稳的做法：JS 检测
matchMedia('(prefers-reduced-motion: reduce)').matches或navigator.userAgent.includes('Mobile') && /Safari\/\d+/.test(navigator.userAgent)，然后动态切换 class
正确结构：wrapper 必须全高且脱离 Bootstrap 容器流
把背景图塞进 .container 或 .row 里，fixed 一定错位——因为这些类没设高度，也没创建独立定位上下文，背景图会相对于 viewport 定位，而内容在容器内滚动，视觉上就是“背景钉死、文字乱跑”。
正确写法是外层独立 wrapper：
- 用
<div class="hero-fixed"></div>这种语义化 wrapper，**不混用 Bootstrap 布局类** - 给 wrapper 加
min-height: 100dvh（不是100vh），适配移动端地址栏缩放 - 所有 background 相关声明（
background-image、background-size、background-position、background-attachment）都写在 wrapper 上 - 内部再嵌套
<div class="container"></div>放内容
必须同时设置 background-repeat、background-size、background-position
只写 background-attachment: fixed 等于没写。移动端尤其敏感，缺一不可：
-
background-repeat: no-repeat—— 否则小图在 fixed 模式下仍会平铺满屏 -
background-size: cover或contain—— 别用100% 100%，它强制拉伸，在不同 DPR 屏幕上糊成一片 -
background-position: center center—— 单写center在 Safari 有解析歧义，必须双center - 推荐合并写法：
background: url(...) no-repeat center center / cover fixed
移动端卡顿不是代码问题，是合成限制
即使 CSS 全对，iOS Safari 仍可能卡顿或模糊——主因是 fixed 背景触发了额外的图层合成，而移动端 GPU 资源有限。这不是性能优化能解决的。
真正有效的缓解方式：
- 图源分辨率别超 2000px 宽，用 WebP 格式压缩，避免解码压力
- 禁用
transform、will-change、perspective等可能干扰合成的父级样式（Bootstrap 的.carousel或自定义动画常隐式触发） - 如果背景图只是装饰，直接降级为
background-attachment: scroll+background-size: cover，体验反而更稳
移动端 fixed 背景本质是妥协方案，能不用就不用；真要实现视差效果，得用 IntersectionObserver + translateY，而不是硬扛 fixed。
