(所有测试发现的问题在vue项目基础上)
解决方式就是获取点击时focus事件,然后让元素失去焦点(理解很简单,焦点触发手机的键盘)
这个不是ios系统的原因啦(ios不背锅,反正下面的都是它的锅)
2.ios手机滚动是出现卡顿
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