ios12以上微信内置浏览器键盘收起后空白问题及原键盘位置点击事件失效问题

机型：iphoneXr（ios 12+）

问题：1. 虚拟键盘收起后，键盘位置空白，body不会及时回落沾满全屏；

　　　2.虚拟键盘收起后，原来虚拟键盘位置的页面元素点击事件失效。

　　（只在微信内置浏览器里打开有以上问题，在原生浏览器里没有问题）

具体描述：

1. 整个页面是100vh，modal从页面底部弹起。键盘收起后，键盘位置空白，body并没有铺满屏幕。（这个问题只是偶发）

2.输入结束之后，直接点击提交按钮，请求正常发送。

   但是，输入结束之后，先点击modal的其他地方（不是灰色蒙层）再点击取消按钮或者蒙层 ，modal都不会收起，点击提交也不会发送请求。

   点击蒙层部分位置反而会触发提交的请求，而且可滑动页面（除modal部分，因为modal是底部固定的布局）。

原因分析（主要靠猜测，难以验证）：

两个问题的本质应该是一样的----键盘收起之后页面渲染有问题。

问题2虽然body铺满了全屏（modal占了问题1留下的空白位置），但是这只是视觉上的，

因为可能是键盘收起后留下了一个透明的蒙层，盖在modal之上，所以modal上的点击事件失效。

怎么解释点击部分灰色蒙层会触发提交事件？

猜测真实的modal仍停留在键盘弹起后modal的位置。所以点击图中黄色区域，会触发提交事件。

解决方案：----重新渲染页面

给Input 绑定onBlur事件，滚动页面，触发重排，让页面重新渲染。

const handleBlur = () => {
     document.documentElement.scrollTop = 0;
}

标签：ios12,微信,蒙层,键盘,点击,modal,收起,页面
来源： https://www.cnblogs.com/deadbug/p/12851564.html