阿夸漫谈

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

发表于 2019-03-04

1. BUG描述

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

iOS12WechatBug

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

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; 
  }
}

(完)

目录