iOS Safari 中 fixed 元素随滚动是因父级触发新包含块，如 transform、opacity
iOS Safari 中 position: fixed 元素“随页面滚动”，不是你写错了，而是它已被浏览器悄悄降级为 position: absolute 或 position: relative —— 锚点从视口变成了某个祖先容器。
为什么 fixed 元素在 iOS 上会跟着滚动
只要任意父级设置了 transform、filter、opacity（比如 opacity: 0.99）、will-change 或 backdrop-filter，就会创建新包含块，导致 fixed 失去对视口的锚定。常见触发点：
- Vue/React 框架默认 wrapper 加了
transform: translateZ(0) - uni-app 的
.uni-page-wrapper自带transform - 弹窗遮罩层用了
backdrop-filter: blur(10px) - 某些 UI 库给 body 或根容器设了
overflow: hidden
DevTools 里 computed position 仍显示 fixed，但 offsetTop 已按父级计算；真机上表现为：手指一拖动，导航栏就“抽搐”或卡在错误位置。
如何快速定位是哪个父级在破坏 fixed
别靠经验猜，用 DevTools 实锤排查：
立即学习“前端免费学习笔记（深入）”；
- 选中失效的元素，在 Elements 面板按住 Shift 连续点击右上角箭头，逐级向上跳父节点
- 每跳一层，切到 Computed 标签页，搜索
transform、filter、will-change - 重点盯
transform: translateZ(0)——视觉无变化，但已创建新定位上下文 - 顺手检查
opacity是否小于 1，很多 UI 库默认设opacity: .99，也会触发退化
真正能落地的修复方式
绕过干扰源比修样式更可靠：
- Vue 3 中用
<teleport to="body"></teleport>把元素挂到body下，DOM 层面脱离所有干扰父级 - React 中用
createPortal挂到document.body；原生 JS 可手动document.body.appendChild(el) - 挂载后必须加
z-index，并确认body没有overflow: hidden（否则可能阻断软键盘弹出） - uni-app H5 中，
<scroll-view></scroll-view>内部的fixed元素无论加多少!important都无效，这是 iOS WebKit 硬限制，必须移出
键盘弹出时 fixed 按钮飘走怎么办
resize 事件在 iOS 上基本不可靠，必须用 focusin/blur 动态切换：
- 监听
input、textarea、[contenteditable]的focusin事件，且回调中立刻判断document.activeElement === targetEl -
focusin后用setTimeout(() => { ... }, 0)延迟读取getBoundingClientRect()，否则坐标仍是弹出前的旧值 - 计算
bottom值用window.innerHeight - inputRect.bottom，不是写死数值 - 支持 iOS 16.4+ 的可选方案：
bottom: env(keyboard-inset-bottom, 0px)，但必须配<meta name="viewport" content="viewport-fit=cover">，且要写 fallback -
blur后立刻恢复position: fixed和原始bottom: 0，并用el.style.removeProperty('top')清除内联样式
最容易被忽略的是：所有坐标计算前，先确认 document.activeElement === inputEl；若页面用了 transform 或 overflow: hidden 父容器，getBoundingClientRect() 返回的坐标可能严重失真，且无任何报错提示。
