ios safari 中 fixed 定位的 input 被顶起，是因为系统强制滚动视口使输入框居中显示，并非 css 失效；scrollintoview 会与该自动滚动叠加，导致双倍上移或抖动。
为什么 fixed 定位的 input 还会被顶起
fixed 元素在 iOS Safari 中并非真正“固定”——键盘弹出时，浏览器会强制滚动视口，使 input 进入可视区中央，导致 position: fixed 的头部、底部或输入框本身发生视觉偏移。这不是 CSS 失效，而是 iOS 的 viewport 重定位行为覆盖了 fixed 渲染层。
scrollIntoView({ block: 'center' }) 反而加重问题
显式调用 scrollIntoView 在 focus 时会与 iOS 自动滚动叠加，造成双倍上移或抖动。尤其当 input 位于页面下半部分时，该方法几乎必然触发异常滚动。
- 只在安卓 WebView 或低版本 iOS（
- 若必须用，应限定为
block: 'nearest'+inline: 'start'，并加behavior: 'auto'避免动画干扰 - 优先检查是否真需要滚动：很多场景下，禁用默认滚动比主动滚动更可靠
用 CSS 抑制自动滚动比 JS 更轻量有效
iOS 16.4+ 支持 scroll-margin 控制元素进入视口时的偏移基准，配合 scroll-behavior: auto 可绕过默认居中逻辑。
- 给目标
input设置scroll-margin: 0，阻止浏览器将其“推”到视口中央 - 父容器设
overflow: hidden或overflow: clip（现代支持），限制滚动传播 - 避免对
body或html设height: 100vh—— 键盘弹出会缩小 viewport height，导致布局塌陷 - 若用
position: fixed布局底部按钮，务必加bottom: env(safe-area-inset-bottom)，否则 safe-area 计算错乱会放大偏移
fixed + transform 升级图层是关键兜底
仅靠 position: fixed 不足以让元素稳定锚定在屏幕物理位置。iOS 渲染管线会对未启用合成的 fixed 元素做重排，键盘事件期间极易失位。
- 给 fixed 元素加
transform: translateZ(0)或will-change: transform，强制创建独立合成层 - 不要对整个
body加，只作用于具体需保护的元素（如 header、submit-btn、input 包裹层） - 若使用 Vue/React，注意动态 class 切换时
transform不能被条件渲染抹掉，否则合成层会重建并闪动 - 测试时重点看 iPhone 15 Pro（iOS 17.4）和微信内置浏览器（X5 内核 v13.x），这两处兼容性最苛刻
真正难处理的不是“怎么让它不顶”，而是“顶完之后如何不残留滚动偏移”。很多方案只解决聚焦瞬间，却忽略失焦后 window.scrollY 残留值导致后续交互错位——这需要在 focusout 后用 setTimeout 延迟 100–200ms 再 window.scrollTo，且必须判断当前是否真处于键盘收起状态，否则会误触回滚。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
