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，后续整理之后在进行总结
网友评论