如何防止 Android 键盘在文本输入焦点上自动滚动到模式窗口的底部？

Question

我目前正在开发一个具有会员搜索功能的网站，并且我有一个包含联系表单的模式窗口，在特定的用户交互时，该窗口会在其余内容上弹出。模态本身有一个position: fixed属性并且是可滚动的。但是，当我选择文本输入并且键盘向上滑动时，模式的内容会滚动到底部，将所选输入放置在可见区域之外，并严重破坏 UX 流程（因为您必须向上滚动才能看到你正在输入的内容）。是否有我遗漏的东西或一些随机属性扰乱了滚动检测？

奇怪的是，我只在移动设备和平板电脑 Android 浏览器（尤其是 Chrome 和 Firefox）上遇到过这个问题，而在 iOS（Chrome 和 Safari）上却没有遇到过。我还确保使用此 JavaScript 库锁定多平台和多浏览器页面滚动。

因此，我已经尝试了一些事情，但都没有成功。我尝试使用 JavaScript 将模态框的高度硬编码为视口高度（最初设置为100vh），当滚动停止时，我在表单底部留下了一个无法到达的区域（很可能相当于键盘的高度）包含一半字段和提交按钮，这本身并不是真正的修复。我还尝试使用绝对定位，将顶部值强制到当前正文滚动位置，但没有成功。

HTML：

<section class="modal__container row row--h-center wrapper">
    <div class="modal__content">
        <!-- Form content (title, subtitle, fields) -->
    </div>
</section>

并向容器添加一个弹性盒显示，并水平居中对齐row。row--h-center

CSS：

.modal__container {

    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 1000000000000;
    pointer-events: none;
    overflow-y: scroll;

    .modal__content {
        position: relative;
        width: 80vw;
        margin: auto 0;
    }
}