移动h5 开发遇到ios系统的各种问题汇总

（所有测试发现的问题在vue项目基础上）

1.移动端选择时间时软键盘弹出问题

解决方式就是获取点击时focus事件，然后让元素失去焦点（理解很简单，焦点触发手机的键盘）

这个不是ios系统的原因啦（ios不背锅，反正下面的都是它的锅）

 

2.ios手机滚动是出现卡顿

一般是设置y轴滚动overflow-y: scroll，父盒子是hidden，在ios系统上是卡顿的效果。

网上一搜就发现很多人都是用webkit-overflow-scrolling: touch 解决的

确实可以解决这个问题，但是其实很有很多bug，下面会讲到那些我遇到的bug

 

3.webkit-overflow-scrolling: touch 导致z-index失效

我的弹窗设置z-index等级是最高的但是每次弹出来都被蒙层给遮住了（安卓不会）

后面发现我的弹窗div的父盒子设置webkit-overflow-scrolling: touch，ios系统这个设置会导致z-index失效

一开始我的解决方式是动态设置webkit-overflow-scrolling，点击弹窗是设置为auto，关闭是设置为touch

测试发现这个确实可以解决z-index失效的问题，但是iphone6 会出现另外一个问题（问题4）（我用iphone7 是ok的）

 

4.动态设置webkit-overflow-scrolling ： touch/ auto 出现屏幕的闪烁

 那就改布局吧 不要动态切换 touch/auto

 待研究...

 

5.被蒙层遮住的div，居然还可以滑动 【ios滚动穿透】【惊呆脸】

场景，我的弹窗不是全屏，一般就用个半透明的布遮住后面的内容，谁曾想到，有天我把手指放到后面内容尝试滑动，居然真操作起来。牛->ios

这个我处理方式很简单 ，在蒙层的div上加上一句 @touchmove.prevent ，而且弹窗内容依旧正常滚动，关闭弹窗页面内容也是正常滚动（已测）

想法很简单，操作你还是经过我（半透明蒙层）（注：别加到body等根盒子上）

 

----未完善 待续

   滚动过程相关学习  https://blog.csdn.net/weixin_42017905/article/details/100557699