写在前面
最近在做微信开发的过程中，发现了苹果手机键盘收起后，页面高度没有还原的bug，下面来详细分析一下。
一、背景
前几天，一个同事发现遇到一个用户反馈的bug，说填写信息后，点击固定定位在底部的支付按钮没有反应。
二、环境测试
本次测试了iphone8（ios12.1.4）、vivo、oppo三台设备，该bug在各个浏览器中的表现，具体结果如下表：
| 运行环境 | iphone | vivo | oppo |
|---|---|---|---|
| 微信 | 有 | 无 | 无 |
| 微信小程序 | 有 | 无 | 无 |
| QQ浏览器 | 有 | 无 | 无 |
| UC浏览器 | 无 | 无 | 无 |
| Google浏览器 | 无 | 无 | 无 |
| 无 | 无 | 无 | |
| 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修复后效果
