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...

（完）