Web Modal 弹窗在移动端因软键盘导致元素错位与点击异常

问题表现

1. 打开 modal 后，点击输入框，软键盘弹出。
2. 关闭软键盘后：
   • modal 内容未能恢复到正确位置。
   • 元素“视觉上”在某一位置，但实际点击响应区域发生偏移（如按钮点击无效或响应错位）。

解决方法

经过多种尝试，发现仅通过 CSS 布局无法彻底解决该问题。

尝试过的组件库（如 headlessui modal、daisyui dialog/modal、heroui modal）均未能有效规避此现象。

✅ 最简单且可靠的解决方案：
在 input 的 blur 事件（即失焦、软键盘关闭时），主动触发页面滚动：

window.scrollTo({ top: 0, behavior: 'smooth' });

这样可以强制页面重排，促使浏览器重新计算布局（layout）。

原因分析

“软键盘滚动问题”的根本原因，通常在于软键盘的弹出与关闭导致视口（viewport）或布局状态未能及时、正确恢复，从而造成视觉位置与实际点击响应区域不同步。

常见原因包括：

1. 视口高度未恢复

在部分移动浏览器（尤其是 iOS Safari 和 Android WebView）中，软键盘弹出时会改变 window.innerHeight。但键盘关闭后，该高度不会立即恢复，或恢复不准确，导致布局错乱。

2. 滚动位置异常

软键盘弹出时，页面会自动滚动以确保输入框可见。键盘关闭后，浏览器不会自动滚动回原位，可能导致 modal 被挤上去，进而引发点击区域错位。

3. 浏览器未触发正确的重排/重绘

部分浏览器在软键盘关闭后未强制重新计算布局（如 iOS），需要手动触发页面刷新。

4. fixed 元素定位异常

许多 modal 采用 position: fixed，但在移动端软键盘弹出后，fixed 的表现可能不稳定（尤其是 iOS），容易导致错位。