Chrome 108+ 版本更改了移动端视口行为，导致 position: fixed 元素在软键盘弹出后滚动时意外隐藏；通过添加 interactive-widget=resizes-content 视口元标签可恢复原有稳定表现。
chrome 108+ 版本更改了移动端视口行为，导致 `position: fixed` 元素在软键盘弹出后滚动时意外隐藏；通过添加 `interactive-widget=resizes-content` 视口元标签可恢复原有稳定表现。
在 Chrome for Android（v108 及以上）中，浏览器对 <input> 或 <textarea> 获得焦点并触发软键盘时的视口（viewport）行为进行了重大调整：系统默认将视口高度收缩为键盘上方可见区域，并暂停对 position: fixed 元素的渲染更新——这直接导致顶部/底部固定栏在滚动过程中“闪烁消失”，仅在反向滚动或键盘收起后才重新绘制。该变更虽旨在优化表单交互体验，却严重破坏了依赖 fixed 布局的 SPA、聊天界面、导航栏等常见场景。
✅ 根本解决方案：启用兼容性视口模式
只需在 <head> 中更新 <meta name="viewport"> 标签，显式声明 interactive-widget=resizes-content：
<meta name="viewport"
content="width=device-width, initial-scale=1.0, interactive-widget=resizes-content">⚠️ 注意：该属性需与 width=device-width 和 initial-scale=1.0 共存，不可单独使用；且仅对 Chrome Mobile 108+ 生效（旧版及其他浏览器会忽略该参数，无副作用）。
? 补充建议（增强鲁棒性）
- 避免仅依赖 fixed 实现关键 UI：对底部输入框区域，可考虑结合 position: sticky + 容器高度控制作为降级方案；
- 监听 focusin/focusout 事件动态添加 .keyboard-active 类，配合 CSS transform: translateZ(0) 强制硬件加速，缓解重绘延迟；
- 测试真机环境：Chrome DevTools 的模拟器无法完全复现此问题，务必在真实 Android 设备上验证。
? 总结
这不是 CSS 编写错误，而是 Chrome 主动变更的平台级行为。interactive-widget=resizes-content 是官方推荐的、零侵入式的修复方式——它让浏览器回归“视口尺寸不变、仅缩放可视区域”的传统逻辑，从而确保 fixed 元素持续参与布局与渲染。升级后，您的顶部导航栏和底部输入栏将不再随键盘弹出而“消失”，用户体验保持连贯稳定。
