fixed元素在iOS滚动时跳动是因100vh锁定高度，地址栏收起后window.innerHeight变大但CSS不重算，应使用min-height: 100dvh并配合@supports兜底和safe-area-inset-bottom处理。
为什么 fixed 元素在 iOS 滚动时会跳动
不是你的 position: fixed 写错了，而是 100vh 在页面加载瞬间就锁死了高度值。iOS Safari 地址栏滚动时收起，window.innerHeight 变大，但 CSS 不重算 100vh，导致 fixed 容器实际高度没变、内容相对位置“上蹿”。典型表现：吸底按钮滚动后突然上浮，遮罩层盖不住底部。
必须用 min-height: 100dvh，不能用 height: 100dvh
height: 100dvh 在安卓部分 WebView 中解析异常，且一旦内容超长就会被裁剪；而 min-height: 100dvh 既能撑满当前可视区，又允许内容自然溢出、滚动，更符合 fixed 定位容器的实际需求。
- ✅ 正确写法：
min-height: 100dvh+overflow-y: auto（如弹窗、底部操作栏） - ❌ 错误写法：
height: 100dvh或height: 100dvh; min-height: 100vh（后者会被忽略） - ⚠️ 注意：父级若为
flex容器，需确保其有明确高度上下文，否则min-height: 100dvh可能不生效
@supports 必须包裹，兜底必须写在前面
iOS 15、微信 X5 内核（基于旧 WKWebView）、部分安卓 WebView 完全不识别 100dvh，整条声明会被丢弃——不是降级，是直接失效，fixed 元素可能塌成 0 高度。
- ✅ 正确结构：
min-height: 100vh先写（外层兜底），再用@supports (min-height: 100dvh)覆盖 - ❌ 错误结构：
min-height: 100vh; min-height: 100dvh（旧浏览器遇到第一个就停，第二个不解析） - ⚠️ 检测必须用
min-height: 100dvh，不是height: 100dvh（规范不支持height使用dvh）
键盘弹出时 dvh 会自动收缩，但 safe-area-inset-bottom 仍需手动处理
100dvh 确实会响应键盘弹出（视口高度实时缩小），但它不处理安全区——iOS 底部手势条或圆角区域仍可能导致 fixed 元素被截断。
立即学习“前端免费学习笔记（深入）”；
- 吸底按钮类元素，除了
min-height: 100dvh，还得加padding-bottom: env(safe-area-inset-bottom) - 别用
100svh替代——它是个固定最小锚点值，键盘弹出时不会变，反而造成大面积留白 - 如果项目需兼容 iOS 15 以下或微信旧版，JS fallback 不可少，但监听
resize（不是scroll），并用requestAnimationFrame节流
真正容易被忽略的点是：dvh 的动态性只作用于高度计算本身，它不管安全区、不管键盘是否遮挡输入框、也不管父容器是否在 flex 布局中丢失了高度上下文——这些都得单独补。
