软键盘弹出会打断css动画渲染并触发视口重排，导致fixed元素失锚、transform跳帧、transition中断；ios表现为动画卡顿与页面上浮，安卓则出现跳帧和视口挤压，需通过隔离干扰源（如改用absolute布局、visualviewport、暂停非关键动画等）来解决。
这个问题本质是软键盘弹出打断了 CSS 动画的渲染节奏，同时触发了视口重排，导致 fixed 元素失锚、transform 动画跳帧、或 transition 中断。iOS 和安卓表现不同，但根源都指向浏览器在键盘状态切换时对渲染管线的强制干预。
iOS 下动画中断 + 页面上浮
iOS Safari 不压缩视口高度，但会让 position: fixed 元素“脱锚”——原本靠底的按钮突然随页面滚动偏移，正在执行的 transform: translateY() 或 opacity 过渡会直接卡住或跳到终值。这不是动画被取消，而是元素脱离了原本的定位上下文。
- 聚焦前确保输入框已在可视区：用
@focus触发inputRef.scrollIntoView({ block: 'nearest' })，避免浏览器自动滚动打断动画 - 禁用浏览器默认滚动干预：给 input 加
scrolling="no"（无效）不如改用hold-keyboard="true"（仅 H5 环境需配合adjust-position="false"） - 动画容器避开 fixed 布局：把做动画的 wrapper 改成
position: absolute或嵌套在 flex 主体内，不依赖视口锚点
安卓下动画跳帧 + 视口挤压
安卓会实时缩小 window.innerHeight，导致基于 100vh 或 calc(100vh - 60px) 的动画容器高度突变，CSS transition 无法平滑响应这种非渐进式尺寸变化，视觉上就是“抖一下”或直接跳转。
- 别用 vh 单位驱动动画：将动画高度逻辑改为 JS 动态计算，监听
resize事件后缓存当前window.innerHeight，再用requestAnimationFrame平滑过渡 - 键盘期间暂停非关键动画：监听
focusin/focusout，临时给动画容器加animation-play-state: paused - 用
visualViewport替代 window.innerHeight：它返回的是不受软键盘影响的“视觉视口”，更稳定（注意兼容性，iOS 15.4+、Android Chrome 82+ 支持）
通用防漂移加固策略
不管 iOS 还是安卓，只要动画和键盘共存，就得切断它们之间的隐式耦合。重点不是“修复动画”，而是“隔离干扰源”。
- 输入框外层用
contain: layout paint，限制浏览器重绘范围，防止键盘触发全屏重排波及动画区域 - 避免在
:focus-within或.active类里写 height/transform 变化，改用独立 class 控制，JS 手动增删 - 键盘弹起期间，给
加style="overflow: hidden"，阻止用户误拖导致布局错乱，收起后再恢复
动画中断不是 bug，是浏览器在资源受限时的主动降级。真正要做的，是让动画逻辑不依赖那些会被键盘随意篡改的环境变量——比如视口尺寸、fixed 定位锚点、或浏览器自动滚动行为。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
