Web Modal 弹窗在移动端因软键盘导致元素错位与点击异常
目录
问题表现
- 打开 modal 后，点击输入框，软键盘弹出。
- 关闭软键盘后：
- 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），容易导致错位。