1. ISO的input光标高度问题
问题:IOS的input框高度会默认占满父盒子的高度,导致光标也会撑满整个input框
解决:父盒子使用上下padding撑开,不使用行高(line-height)居中
2. ISO微信h5页面上下滑动时卡顿,页面缺失
问题:如果页面高度超出了一屏,滑动页面就会出现卡顿,有时会有页面显示不全的情况
分析:苹果微信浏览器内核使用自带的safari,需要overflow-scrolling开启回弹效果
解决:*{ -webkit-overflow-scrolling: touch }
注意:如果页面中有绝对定位的节点,该节点的显示会错乱
3. ISO键盘唤起,键盘收起以后页面不回位
问题:输入内容时,键盘弹出,页面内容整体上移,但是键盘收起,页面内容无法归位
分析:input聚焦时,弹出的软键盘占位,失去焦点时软键盘消失,但还是占位的,导致input框不能再次输入
解决:监听input的blur方法,失去焦点时,用js滚动页面
4. Android弹出的软键盘遮盖文本框
问题:安卓微信h5页面太长时弹出软键盘后会挡住input输入框
解决:给input和textarea标签添加focus事件,聚焦时延时滚动
5. ISO去除input默认阴影失效
问题:一般去除input阴影我们可以使用outline: none;
也可以使用border: 0;但是我们有时候需要border的情况下,
只能使用outline: none; 安卓可以生效,IOS发现阴影还在?
解决:使用-webkit-appearance: none; 即可去除input默认阴影