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

共计 569 个字符，预计需要花费 2 分钟才能阅读完成。

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…

（完）