根本原因是浏览器在中文输入法「未确认输入」状态下反复重排input容器：候选框浮层临时撑开父容器高度或触发width重算，而box-sizing和line-height未锁定导致视觉抖动；必须设box-sizing: border-box并用无单位数值或固定像素值锁定line-height，禁用font-variant和letter-spacing动态变化，避免同步读取offsetWidth等布局属性。
输入法切换（尤其是中文拼音输入法）导致表单元素水平跳动，根本原因不是 JS 错误，而是浏览器在「未确认输入」状态下反复重排 input 容器：拼音候选框浮层会临时撑开父容器高度或触发 width 重算，而 input 的 box-sizing、line-height 和字体度量又未锁定，造成视觉抖动。
input 元素必须锁定 box-sizing 和 line-height
默认 box-sizing: content-box 下，padding 和 border 会额外增加宽度；而中文输入法候选框出现时，浏览器可能临时调整行内布局，触发重排。不锁定这两项，抖动无法根除。
-
box-sizing必须设为border-box，且显式声明——Bootstrap 等框架的重置样式不一定覆盖所有场景 -
line-height必须为无单位数值（如1.4）或固定像素值（如24px），禁用normal或unset - 避免同时设置
height和line-height，否则在 iOS Safari 中易因字体度量差异引发微跳
禁用 input 的 font-variant 和 letter-spacing 动态变化
某些中文字体（如思源黑体、PingFang SC）在输入法激活时会临时启用 font-variant: alternate 或调整字间距，导致字符宽度波动，进而牵动整个表单容器宽度。
- 显式声明
font-variant: normal，禁用系统级变体 - 慎用
letter-spacing: 0.02em这类微调值——它在输入法候选阶段会被放大计算，造成左右晃动 - 若必须做字距优化，改用整数像素值（如
letter-spacing: 1px），并确保所有状态（focus/active/disabled）下一致
中文输入法下避免依赖 value 长度做 layout 计算
拼音输入过程中，input.value 可能是「nihao」或「你好」或「ni hao」三种状态混杂，DOM 读取时机不同会导致 offsetWidth、getBoundingClientRect() 返回不稳定结果，引发 layout thrashing。
立即学习“前端免费学习笔记（深入）”；
- 不要在
input事件回调里同步读取el.offsetWidth或el.scrollWidth - 如需响应内容长度（如自适应宽度输入框），改用
requestAnimationFrame批量读取，并缓存上一帧结果做 delta 判断 - 对
textarea做自动高度适配时，用scrollHeight替代offsetHeight，前者不受输入法浮层干扰
移动端需额外处理软键盘唤起时的视口收缩
iOS Safari 在中文输入法弹出时，不仅 height 缩小，还会临时修改 document.documentElement.clientWidth，若表单用了 width: 100vw 或 flex 基准依赖该值，就会跳。
- 表单容器统一用
width: 100%，而非100vw—— 后者在键盘弹出时会包含隐藏滚动条宽度，造成错位 - 外层容器加
position: relative，内部input用position: absolute+left: 0; right: 0;锚定，脱离文档流干扰 - 聚焦时临时加
body { overflow: hidden; }，失焦恢复——这能阻止键盘唤起时的默认滚动和重排连锁反应
真正难处理的是输入法浮层与浏览器渲染管线的耦合：它既不是纯 CSS 问题，也不是纯 JS 问题，而是字体度量、文本布局引擎、合成层调度三者在毫秒级交互中的竞态。锁定 box-sizing 和 line-height 是底线，其余措施都是在对抗不同厂商 WebView 的实现差异。
