Chrome移动端模态框输入框切换焦点抖动的原因与解决方案

• Chrome移动端弹出软键盘时，会将视口高度调整为可见区域高度（不含软键盘）。若模态框使用transform: translateY(-50%)或基于视口的flex垂直居中，切换焦点到上方输入框时，浏览器会自动滚动页面以确保聚焦元素可见，而模态框的居中计算依赖视口高度，两者冲突导致模态框位置反复调整，产生抖动。
• 另外，position: fixed的模态框在软键盘弹出后，定位参考变为可见视口而非原视口，视口高度的动态变化会触发模态框重排，进一步加剧抖动。

要实现输入框水平垂直居中且切换焦点无抖动，可按以下步骤调整：

1. 模态框容器全屏固定定位
   给模态框外层容器设置全屏固定布局，使其始终适配当前视口：

   .modal-container {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: rgba(0,0,0,0.5);
     display: flex;
     align-items: center;
     justify-content: center;
     overflow-y: auto; /* 小屏或软键盘弹出时允许内部滚动 */
   }
   

2. 输入框容器固定高度+内部居中
   给包含输入框的容器设置固定高度，避免视口变化导致布局波动：

   .input-wrapper {
     background: #fff;
     padding: 2rem;
     border-radius: 8px;
     width: 90%;
     max-width: 400px;
     height: 200px; /* 固定高度保证布局稳定 */
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: space-around; /* 均匀分布输入框 */
   }
   

3. 禁用页面滚动
   模态框打开时，给body添加样式禁用页面滚动：

   body.modal-open {
     overflow: hidden;
     height: 100%;
   }
   

   防止浏览器因页面滚动触发模态框位置偏移。

4. 使用flex布局替代transform居中
   避免top: 50%; transform: translateY(-50%)这种依赖视口计算的居中方式，改用flex的align-items: center和justify-content: center，布局稳定性更强。

调整后，Chrome移动端弹出软键盘时，模态框容器会自动适配可见视口高度，输入框容器高度固定，切换焦点时浏览器无需滚动页面（或仅滚动模态框内部），不会触发模态框位置重排，抖动现象即可消除。

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