寫在前面
最近在做微信開發(fā)的過程中，發(fā)現(xiàn)了蘋果手機鍵盤收起后朱躺，頁面高度沒有還原的bug，下面來詳細分析一下摄闸。
一禁漓、背景
前幾天，一個同事發(fā)現(xiàn)遇到一個用戶反饋的bug忧侧，說填寫信息后石窑，點擊固定定位在底部的支付按鈕沒有反應。
二蚓炬、環(huán)境測試
本次測試了iphone8（ios12.1.4）松逊、vivo、oppo三臺設備肯夏，該bug在各個瀏覽器中的表現(xiàn)棺棵，具體結果如下表：
| 運行環(huán)境 | iphone | vivo | oppo |
|---|---|---|---|
| 微信 | 有 | 無 | 無 |
| 微信小程序 | 有 | 無 | 無 |
| QQ瀏覽器 | 有 | 無 | 無 |
| UC瀏覽器 | 無 | 無 | 無 |
| Google瀏覽器 | 無 | 無 | 無 |
| 無 | 無 | 無 | |
| Safari | 無 |
結論：只有ios環(huán)境下的微信、微信小程序熄捍、QQ瀏覽器才會出現(xiàn)上述bug
三烛恤、原因分析
1、點擊輸入框余耽，拉起鍵盤缚柏，頁面顯示區(qū)的高度會變小，頁面中使用固定定位在底部的按鈕會吸附在軟鍵盤上部碟贾。
2币喧、輸入完成轨域，收起鍵盤，但頁面顯示區(qū)域不會變回來杀餐，頁面底部會多出一部分空白內(nèi)容干发，固定定位元素會重新回到底部，但是點擊無效史翘。
復制鏈接 http://www.yuhoo.huoyuhao.top/wx_bug/wx_bug.html 到蘋果微信中枉长，可以體驗該bug
四、解決方案
如果主動觸發(fā)頁面 scroll琼讽，會重新計算頁面顯示區(qū)域大小必峰，空白內(nèi)容消失，按鈕可以點擊钻蹬，可以修復該bug吼蚁。
代碼如下：
// 判斷瀏覽器種類
if(/ip(hone|od|ad).*(micromessenger|mqqbrowser)/i.test(navigator.userAgent)) {
// 冒泡監(jiān)聽失去焦點事件 blur不會冒泡
window.addEventListener('focusout', function (e) {
// 判斷元素
if(e.target && /(input|select|textarea)/i.test(e.target.tagName)) {
document.body.scrollTop = document.body.scrollTop // 滾動頁面
}
})
}
1、當元素即將失去焦點時（收起鍵盤）问欠，focusout 事件被觸發(fā)肝匆。focusout 事件和 blur 事件之間的主要區(qū)別在于后者不會冒泡。
2顺献、focusout瀏覽器兼容性：
focusout瀏覽器兼容性
復制鏈接 http://www.yuhoo.huoyuhao.top/wx_bug/wx_bug_fixed.html 到蘋果微信中术唬，可以體驗該bug修復后效果
