固定定位div未随软键盘上移的问题及跨浏览器适配问询

初始问题 #

我尝试将一个.bottom-div固定在容器底部，期望当软键盘（OSK）弹出时，它能随视口高度变化而上移至键盘上方，但实际并未生效。请问哪里操作有误？

相关代码 #

HTML结构 #

<div class="custom-modal">
  <div class="modal-content">
    <!-- 模态框内容 -->
    <h2>Title</h2>
    <p>Modal body content</p>
    <input type="text" placeholder="Enter text" />
  </div>
  <div class="bottom-div">
    <!-- 底部区域内容 -->
    <button>Submit</button>
  </div>
</div>

CSS样式 #

.custom-modal {
  position: relative;
}

.bottom-div {
  position: fixed;
  bottom: 0;
  width: 100%;
  background-color: #fff; 
}

排查过程与疑问 #

• 编辑1：在Samsung Internet for Android浏览器中测试，功能符合预期，是否是Chrome导致的问题？

• 编辑2：经排查，问题根源在于Android Chrome结合屏幕键盘（OSK）的Layout Viewport与Visual Viewport的resize行为变更：

自Chrome 108起，Android版Chrome在显示屏幕键盘时将不再调整Layout Viewport的大小。

因此，我在index.html中添加以下代码恢复resize行为：

<meta
  name="viewport"
  content="width=device-width, initial-scale=1 interactive-widget=resizes-content"
/>

现在疑问：这是否为合理方案？是否会引发跨浏览器兼容问题？官方文档说明：

此设置将使Android版Chrome与iOS、iPadOS、Windows、CrOS版Chrome，iOS、iPadOS版Safari，以及iOS、iPadOS、Windows版Edge的行为保持一致。
修改后是否会导致跨浏览器行为差异？

• 编辑3：iOS的Safari和Chrome仍存在问题（布局未随键盘弹出调整，固定div无法上移），已在iPhone 12和iPhone 12 Pro上测试，寻求适配方案。

内容的提问来源于stack exchange，提问作者Dragos Polifronie