iOS12 系统 BUG —— 微信 H5 输入法收起留有空白

1. BUG描述

打开 iOS 12 系统的微信 H5 页面，当点击 input 输入弹出输入法的时候，页面如果上移了，那输入法收起的时候页面无法自动回到底部，会留有空白，导致下次点击弹起的失效。

上面三张图中，第一张是未点击的状态，第二张是点击最后一个输入框弹出输入法的状态，第三张是收起输入法的状态，可以发现在第三张图中底部出现空白，页面没有下移返回底部。

2. 解决方法

可以通过重置元素滚动位置，触发回流（Reflow），从而消除底部空白。

// 判断是否为 iOS 微信
isIOSWeChat () {
  const ua = window.navigator.userAgent.toLowerCase()
  return ua.includes('micromessenger') && ua.includes('like mac os x')
}

// input 失去焦点事件
inputBlur (e) {
  if (isIOSWeChat()) {
    // window.scrollTo(0, document.documentElement.scrollTop || document.body.scrollTop) 亦可
    document.body.scrollTop = document.body.scrollTop; 
  }
}

• 本文首发于个人博客：https://www.aquatalking.com/b...

（完）