iOS H5中background-attachment: fixed失效是WKWebView主动限制，非bug；应改用内联height的绝对定位元素或伪元素模拟背景，并真机全机型验证。
iOS H5 页面中 background-image 配合 scroll-view 或页面级滚动时，背景图“不随内容滚动”或“滚动卡顿/错位”，根本不是图片本身问题，而是 WebKit 对 fixed 背景和滚动容器的渲染策略导致的——它会把 background-attachment: fixed 当作独立图层处理，在滚动过程中丢帧或冻结。
background-attachment: fixed 在 iOS H5 中为何失效
这不是 bug，是 WKWebView 的主动限制：iOS 从 Safari 13 开始就基本废弃了对 background-attachment: fixed 的支持，尤其在微信内置浏览器（基于 WKWebView）中，该属性会被静默忽略或降级为 scroll。你写 background-attachment: fixed，实际生效的是 scroll；但如果你又套了一层 scroll-view，而它的子元素没设 position: relative 或高度未锁定，背景图就会“漂”在顶部不动，看起来像“滚动失效”。
- 真机调试时用 Safari 远程调试可验证：Elements 面板里能看到 computed style 中
background-attachment已变成scroll - 即使加了
-webkit-background-clip: text等 hack，也无法恢复 fixed 行为 - 背景图尺寸超过 4096px 高度（如
750rpx × 4200rpx）还会触发白屏，和滚动无关，但常被误判为同一问题
scroll-view 内背景图必须用 inline style + 动态 height
想让背景图“跟着内容动”，唯一可靠方式是放弃 background-attachment，改用绝对定位的 <image> 或 <view> 模拟背景，并通过 JS 同步滚动偏移。但更轻量的做法是：把背景图塞进 scroll-view 的第一个子容器，用内联 height 控制拉伸范围。
- 不要在
scroll-view上直接设background-image，它没有滚动上下文 - 正确写法：
<scroll-view scroll-y="true" class="scroll-container"> <view :style="{ backgroundImage: 'url(' + bgUrl + ')', height: bgHeight + 'px', backgroundSize: '100% auto' }"></view> <!-- 其他内容 --> </scroll-view> -
bgHeight必须是精确像素值（如1200），不能用100%或vh，否则 iOS 下 height 计算为 0 - 若内容动态加载，需在
this.$nextTick(() => { ... })中重算bgHeight并更新
页面级滚动时 background-image 错位的修复点
如果不用 scroll-view，而是靠 page 或 body 原生滚动，背景图错位往往来自两个隐藏条件：
- 父容器（如
.page）没设height: 100vh，导致 background-size: cover 计算基准错误 - 微信浏览器默认给
body加了overflow-x: hidden，会截断横向背景延伸，加body { overflow-x: visible !important; }可修复 - 使用
transform: translateZ(0)强制 GPU 加速后，部分机型反而加剧背景撕裂，iOS 上慎用 - 避免在背景容器上写
will-change: transform，它会让 WebKit 提前缓存背景图层，滚动时不同步
替代方案：用 pseudo-element 模拟 fixed 效果
如果必须视觉上“背景不动、内容动”，可用伪元素 + position: fixed 模拟，但要绕过 iOS 的 fixed 渲染缺陷：
- 给最外层
<view class="page">加position: relative - 用
::before绘制背景：.page::before { content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-image: url(...); background-size: cover; z-index: -1; pointer-events: none; } - 关键补丁：在 mounted 中执行
document.body.style.position = 'static'，防止微信自动加position: fixed破坏布局 - 此方案在 iPhone 12+ 上稳定，但 iPhone SE（第二代）需额外加
backface-visibility: hidden防闪烁
真正麻烦的不是怎么写 CSS，而是 iOS 微信里 background 和 scroll 的绑定关系完全不可控——它可能在某次系统更新后突然变行为。所以，上线前务必用真机（非模拟器）跑通 iPhone 8 到 15 全系，重点看首屏加载后滚动三秒内的背景表现。
