ios safari中position: fixed弹窗错乱主因是软键盘压缩视觉视口导致坐标计算失准；须用settimeout延迟读取真实位置，或优先采用visualviewport.height，兼容旧版则fallback至settimeout+documentelement.clientheight。
iOS Safari 中 position: fixed 弹窗定位错乱，90% 是因为软键盘弹出后视觉视口（visual viewport）被压缩，但浏览器仍按旧基准计算位置——DOM 坐标和视觉位置脱节，点击失效、弹窗飘移、失焦不复位都是表象。
为什么 focusin 时读不到真实坐标
弹窗 DOM 位置依赖 window.innerHeight 和 document.scrollingElement.scrollTop，但 focusin 触发瞬间，软键盘尚未展开，这些值仍是“键盘前状态”。直接取 getBoundingClientRect().top 会返回错误偏移；用 offsetTop 更糟——它在 position: relative 父容器下不反映滚动影响。
- 必须加
setTimeout(() => { /* 读坐标 */ }, 0)，让浏览器完成重排后再取值 - 推荐用
visualViewport?.height替代window.innerHeight，它反映用户当前真正看到的高度 - 若需兼容 iOS 15.3 及更早版本（如微信 WebView），
visualViewport不存在，fallback 到setTimeout+document.documentElement.clientHeight
绝对定位模拟 fixed 的三个硬条件
不用 fixed 并非妥协，而是把锚点从不可靠的视口切换到你可控的父容器。但漏掉任一条件都会穿帮：
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
-
body必须设position: relative且min-height: 100vh（不能只写height: 100vh，否则键盘收起后塌陷） - 弹窗本身用
position: absolute，并显式写width: 100%（横屏缩放时防宽度失真） - 监听
focusin和blur动态切换：focusin 后设position: absolute+ 计算top，blur 后立刻切回position: fixed+top: 0
滚动时弹窗不跟随？别监听 scroll
给弹窗加 scroll 监听器实时更新 top，会导致严重抖动——iOS Safari 对频繁 DOM 写入极其敏感，QA 一眼就能看出卡顿。
- 正确做法是：弹窗打开时禁止页面滚动，而非让它“跟着动”
- 禁用方式必须是
body { overflow: hidden; position: fixed; width: 100%; }，仅overflow: hidden在真机上无效 - 同时用
body { padding-right: calc(100vw - 100%) }防滚动条消失导致的宽度跳变（老版 Safari 不支持calc，可 JS 检测后写死17px）
@supports 和 env(keyboard-inset-bottom) 的实际作用边界
env(keyboard-inset-bottom) 看似完美，但它只在 iOS Safari 16.4+ 生效，安卓全不支持，且必须配 @supports (bottom: env(keyboard-inset-bottom)) 才能降级。单独写会整条规则被忽略。
- 不要把它当主力方案，只作为 iOS 新设备的微调补充
- 兜底必须存在：
bottom: env(keyboard-inset-bottom, 0px)中的0px是 fallback，缺了键盘收起后弹窗悬空 -
@supports必须包裹整个规则块，不能只包值；否则旧 Safari 仍走100vh老路，错位照旧
最易被忽略的是：弹窗内部若有 input 或 textarea，它们获得焦点时会再次触发视口重算——这意味着你得在弹窗内所有可聚焦元素上都绑 focusin/blur，而不是只监听弹窗根节点。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
