你必定踩过的微信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默认阴影