企业微信H5页面开发中的问题解决

1.键盘收起以后页面不归位

问题描述：

输入内容时，敲键盘会让页面上移，收起键盘，页面不归位，下方会显示空白

问题分析：

软键盘弹起后，若原输入框被遮挡，页面整体将会上移，然而当输入框失焦，软键盘收起后，页面未恢复。

解决方案：

在input、textarea输入框失去焦点时，触发浏览器的重绘，使的错误的渲染回复正常，滚动位置也不会有改变。

 document.addEventListener('focusout', (e) => {
      ['input', 'textarea'].includes(e.target.localName) && document.body.scrollIntoView(false)
      console.log(e.target.localName)
 }, true)

2.在iOS上input标签光标高度异常

问题描述：

input标签获取焦点之后问题，光标高度过高，安卓手机显示正常。

问题分析：

使用height、line-height设置input的高度和文字垂直居中。

解决方案

使用padding撑开input的高度。这样光标高度和字体大小就一样了。

3.ios端企业微信h5页面上下滑动时卡顿、页面缺失

问题描述：

在ios端，上下滑动页面时，如果页面高度超出了一屏，就会出现明显的卡顿，页面有部分内容显示不全的情况

问题分析：

暂时不知道什么原因

解决方案：

*{
-webkit-overflow-scrolling: touch;
}

这个属性有bug，如果页面中有设置了绝对定位的节点，那么该节点的显示会错乱。
-webkit-overflow-scrolling 属性控制元素在移动设备上是否使用滚动回弹效果。

auto 使用普通滚动，当手指从触摸屏移开，滚动会立即停止

touch 使用具有回弹效果的滚动，当手指从触摸屏移开，内容会继续保持一段时间的滚动效果。继续滚动的速度和持续的时间和滚动的手势强烈程度成正比。同时也会创建一个新的堆栈上下文。

一些标签和属性在iOS13版本的手机上会有一些新的bug，后续整理之后在进行总结