IOS系统微信键盘收起后，高度计算bug

写在前面
最近在做微信开发的过程中，发现了苹果手机键盘收起后，页面高度没有还原的bug，下面来详细分析一下。

一、背景

前几天，一个同事发现遇到一个用户反馈的bug，说填写信息后，点击固定定位在底部的支付按钮没有反应。

二、环境测试

本次测试了iphone8（ios12.1.4）、vivo、oppo三台设备，该bug在各个浏览器中的表现，具体结果如下表：

运行环境	iphone	vivo	oppo
微信	有	无	无
微信小程序	有	无	无
QQ浏览器	有	无	无
UC浏览器	无	无	无
Google浏览器	无	无	无
QQ	无	无	无
Safari	无

结论：只有ios环境下的微信、微信小程序、QQ浏览器才会出现上述bug

三、原因分析

1、点击输入框，拉起键盘，页面显示区的高度会变小，页面中使用固定定位在底部的按钮会吸附在软键盘上部。
2、输入完成，收起键盘，但页面显示区域不会变回来，页面底部会多出一部分空白内容，固定定位元素会重新回到底部，但是点击无效。

复制链接 http://www.yuhoo.huoyuhao.top/wx_bug/wx_bug.html 到苹果微信中，可以体验该bug

四、解决方案

如果主动触发页面 scroll，会重新计算页面显示区域大小，空白内容消失，按钮可以点击，可以修复该bug。
代码如下：

// 判断浏览器种类
if(/ip(hone|od|ad).*(micromessenger|mqqbrowser)/i.test(navigator.userAgent)) {
     // 冒泡监听失去焦点事件 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 事件被触发。focusout 事件和 blur 事件之间的主要区别在于后者不会冒泡。
2、focusout浏览器兼容性：

focusout浏览器兼容性

复制链接 http://www.yuhoo.huoyuhao.top/wx_bug/wx_bug_fixed.html 到苹果微信中，可以体验该bug修复后效果