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,后续整理之后在进行总结