Chrome 108+ 移动版为优化输入体验，默认改变了 viewport 缩放行为，导致 position: fixed 元素在软键盘弹出后滚动时异常隐藏；通过添加 interactive-widget=resizes-content 视口元标签即可恢复原有固定定位行为。
chrome 108+ 移动版为优化输入体验，默认改变了 viewport 缩放行为，导致 `position: fixed` 元素在软键盘弹出后滚动时异常隐藏；通过添加 `interactive-widget=resizes-content` 视口元标签即可恢复原有固定定位行为。
在 Chrome for Android（v108 及以上）中，浏览器对 <input> 和 <textarea> 聚焦时的视口（viewport）行为进行了重大调整：当软键盘弹出时，浏览器默认将视口高度动态收缩（即 visual viewport 缩小），并触发 position: fixed 元素的重绘逻辑异常——尤其在滚动过程中，顶部/底部 fixed 元素会短暂“消失”或错位，反向滚动后才重新渲染。这一变更虽提升了表单交互的可见性，却破坏了大量依赖 fixed 布局的 SPA、聊天界面、导航栏等场景的稳定性。
根本解决方法：启用兼容性视口行为
Chrome 官方为此提供了标准化的回退机制——在 <head> 中声明 interactive-widget=resizes-content 属性：
<meta name="viewport"
content="width=device-width, initial-scale=1.0, interactive-widget=resizes-content">✅ 此设置将强制 Chrome 恢复旧版行为：软键盘弹出时，visual viewport 不再压缩主视口尺寸，fixed 元素继续锚定在布局视口（layout viewport）边缘，滚动与定位完全稳定。
⚠️ 注意事项：
- 该属性仅在 Chrome 108+ Android 上生效，对 iOS Safari、Firefox Mobile 等无影响（它们本就保持传统行为）；
- 不要与 viewport-fit=cover 混用，后者用于适配刘海屏，二者目标不同；
- 若页面已使用 height=device-height 等过时 viewport 值，需移除，避免冲突；
- 配合 scroll-behavior: smooth 或 @media (pointer: coarse) 可进一步提升移动端滚动体验。
验证建议
在真实 Android 设备上打开 DevTools → Network → Disable cache，修改 meta 标签后硬刷新，聚焦底部 textarea 并上下快速滚动，确认 #oben 与 #unten 始终可见且位置恒定。
总结：这不是 CSS 或 JavaScript 的 bug，而是浏览器主动演进带来的兼容性挑战。通过一行标准 meta 声明，即可零成本、无副作用地回归可靠 fixed 布局，是当前最推荐、最轻量的生产级修复方案。
