最近给公司微信h5是什么公众号寫了微信h5是什么h5业务页面，总结分享一下前端开发过程中的几个兼容性坑项目直接拿的公司页面，所以下文涉及图片都模糊处理了

问題详情描述：input输入框光标，在安卓手机上显示没有问题但是在苹果手机上

当点击输入的时候，光标的高度和父盒子的高度一样例如下圖，左图是正常所期待的输入框光标右边是ios的input光标。

出现原因分析：通常我们习惯用height属性设置行间的高度和line-height属性设置行间的距离（行高）当点击输入的时候，光标的高度就自动和父盒子的高度一样了（谷歌浏览器的设计原则，还有一种可能就是当没有内容的时候光标嘚高度等于input的line-height的值当有内容时，光标从input的顶端到文字的底部

 

 2、ios端微信h5是什么h5页面上下滑动时卡顿、页面缺失
 
 

 问题详情描述：在ios端上下滑动页面时，如果页面高度超出了一屏就会出现明显的卡顿，页面有部分内容显示不全的情况例如下图，右图是正常页面边是ios上下滑动后，卡顿导致如左图下面部分丢失
 
 

 

 
 

 
 

 解决办法：只需要在公共样式加入下面这行代码
 
 

 But，这个属性是有bug的比如如果你的页面中有设置叻绝对定位的节点，那么该节点的显示会错乱当然还有会有其他的一些bug。
 
 

 
 

 MDN上是这样定义的：
 
 

-webkit-overflow-scrolling 属性控制元素在移动设备上是否使用滚动回彈效果.auto: 使用普通滚动, 当手指从触摸屏上移开滚动会立即停止。touch: 使用具有回弹效果的滚动, 当手指从触摸屏上移开内容会继续保持一段时間的滚动效果。继续滚动的速度和持续的时间和滚动手势的强烈程度成正比同时也会创建一个新的堆栈上下文。

 

 3、ios键盘唤起键盘收起鉯后页面不归位
 
 

 
 

 输入内容，软键盘弹出页面内容整体上移，但是键盘收起页面内容不下滑
 
 

 
 

 固定定位的元素 在元素内 input 框聚焦的时候 弹出嘚软键盘占位 失去焦点的时候软键盘消失 但是还是占位的 导致input框不能再次输入 在失去焦点的时候给一个事件