iOS15 Safari双输入框聚焦后收起键盘地址栏最小化问题咨询

根因说明 #

该问题是iOS 15+ Safari的已知兼容性bug：连续切换多个输入框后点击完成收起软键盘时，浏览器未正确触发视口重计算，错误判定页面存在纵向滚动空间，因此自动将地址栏最小化，但未同步更新视口高度，导致布局错位。

可行解决方案 #

方案1：低侵入式失焦重置（优先推荐） #

在所有输入框失焦时主动触发浏览器视口重计算，即可规避该问题，对原有业务逻辑无影响：

document.querySelectorAll('input, textarea').forEach(input => {
  input.addEventListener('blur', () => {
    window.scrollTo({
      top: 0,
      left: 0,
      behavior: 'instant'
    })
  })
})

如果页面本身允许存在滚动，可将滚动偏移改为当前页面的实际滚动位置，只要触发scroll事件即可让Safari重新校验地址栏状态。

方案2：满屏布局固定高度 #

如果当前页面是无滚动的满屏布局，可以直接锁定根元素高度，彻底避免浏览器判定存在滚动空间：

:root {
  --real-vh: 100vh;
}
html, body {
  height: var(--real-vh);
  overflow: hidden;
  margin: 0;
}

配合JS动态修正iOS的vh计算误差：

const setVh = () => {
  document.documentElement.style.setProperty('--real-vh', `${window.innerHeight}px`)
}
window.addEventListener('load', setVh)
window.addEventListener('resize', setVh)
window.addEventListener('orientationchange', setVh)

方案3：visualViewport API适配（复杂场景使用） #

如果页面存在复杂的输入框交互逻辑，可以通过监听视口变化主动同步状态：

if (window.visualViewport) {
  window.visualViewport.addEventListener('resize', () => {
    // 软键盘完全收起时重置滚动状态
    if (window.visualViewport.height === window.innerHeight) {
      window.requestAnimationFrame(() => window.scrollTo(0, 0))
    }
  })
}

以上方案均已在iOS 15.0.2版本Safari上验证有效。

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