iOS Safari中background-attachment: fixed“抖动”实为100vh动态重算导致cover缩放，并非代码错误；真机地址栏/键盘/横竖屏切换使vh值突变（如667px→540px），而height: 100%因高度链断裂或层叠上下文干扰仍不可靠；唯一稳定解是position: fixed + object-fit图片方案，需设100vw/100vh、z-index: -1、pointer-events: none，并加backface-visibility: hidden缓解渲染延迟。
为什么 iOS Safari 里 background-attachment: fixed 会抖动
不是代码写错，是 iOS Safari 在地址栏收放、键盘弹出、横竖屏切换时会动态重算 100vh 值——比如从 667px 突然跳到 540px，导致 background-size: cover 重新缩放，视觉上就是“一抽一抽”的抖动。这个抖动在桌面端几乎不出现，但在真机上非常显眼。
用 100% height 替代 100vh 能缓解吗
不能。如果父容器没显式高度，height: 100% 会退化为 auto，背景图直接塌缩；而设了 height: 100% 但祖先链里有 transform 或 overflow: hidden，又会触发层叠上下文变更，让 background-attachment: fixed 静默退化为 scroll。
- 必须确保目标元素是
body的直接子元素（如<div class="hero">），且body自身没有transform、filter、opacity -
height: 100vh是目前唯一能撑开视口的可靠值，但需配合防抖策略 - 不要给该元素加
border-radius或overflow: hidden，否则 Safari 会异常裁切背景图
真正有效的防抖方案：用 position: fixed + object-fit
绕过 background-attachment 的所有渲染陷阱，用独立图层实现物理固定：
<img src="bg.jpg" alt="" style="position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; object-fit: cover; z-index: -1; pointer-events: none;"> <main style="position: relative;">内容</main>
-
width: 100vw比100%更稳——它锚定视口宽度，不受父容器 padding 或 box-sizing 影响 - 务必加
pointer-events: none，否则图片会拦截所有点击和滚动事件 - 若页面存在横向滚动，改用
min-width: 100vw防止右侧留白 -
z-index: -1必须显式设置，某些旧版 WebView 对负值渲染异常，可改用z-index: 0+ 给<main>加z-index: 1
最后要注意的细节
哪怕用了 position: fixed 图片方案，iOS 上仍可能在键盘收起瞬间出现半秒空白——这不是 bug，是 WebKit 渲染管线对视口尺寸突变的响应延迟。此时加 backface-visibility: hidden 到 <img> 元素能强制走更稳定的合成路径，但别滥用，它本身会创建额外图层。
立即学习“前端免费学习笔记（深入）”；
