你一定踩过的微信H5的坑

1. IOS的input光标高度问题

问题：IOS的input框高度会默认占满父盒子的高度，导致光标也会撑满整个input框

解决：父盒子使用上下padding撑开，不使用行高(line-height)居中

2. IOS微信h5页面上下滑动时卡顿，页面缺失

问题：如果页面高度超出了一屏，滑动页面就会出现卡顿，有时会有页面显示不全的情况

分析：苹果微信浏览器内核使用自带的safari，需要overflow-scrolling开启回弹效果

解决：*{ -webkit-overflow-scrolling: touch }

注意：如果页面中有绝对定位的节点，该节点的显示会错乱

3.IOS键盘唤起，键盘收起以后页面不归位

问题： 输入内容时，键盘弹出，页面内容整体上移，但是键盘收起，页面内容无法归位

分析：input聚焦时，弹出的软键盘占位，失去焦点时软键盘消失，但还是占位的，导致input框不能再次输入

解决： 监听input的blur方法，失去焦点时，用js滚动页面

4. Android弹出的软键盘遮盖文本框

问题：安卓微信h5页面太长时弹出软键盘后会挡住input输入框

解决：给input和textarea标签添加focus事件，聚焦时延时滚动

5. IOS去除input默认阴影失效

问题：一般去除input阴影我们可以使用outline: none; 也可以使用border: 0;但是我们有时候需要border的情况下，只能使用outline: none; 安卓可以生效，IOS发现阴影还在?

解决：使用-webkit-appearance: none; 即可去除input默认阴影