今天测试那边提出一个bug:在ios微信中点击按钮不能弹出弹窗,而在安卓微信中表现正常。

第一反应是ios中可能将点击事件加载body上导致的点击失效,然而查看代码发现事件是直接绑定到按钮上的,不应该存在这个问题。

在点击事件的绑定函数中加入调试代码,发现ios中点击事件是有执行的,然而却并没有看到应有的弹出层......然后查看弹出层代码,用的是postion: fixed定位,按理说也不应该会有问题。

经过一番折腾,将swiper锁定解除,发现弹窗并不是没有弹出,而是弹出到swiper的前一个页面中去了。看前端写的代码结构,发现将弹窗相关代码添加到第二个页面内部去了,尝试将弹窗代码移动到body的子级,bug就消失了!!!

这里是bug重现代码:ios fixed定位和swiper结合的坑,可同时用ios和安卓手机查看对比效果。

示意图.png

总结:在ios中使用swiper插件的时候,如果元素是相对于屏幕用fixed定位的话,不能将定位元素写在单个swiper页面中,不然会导致“无法显示”的问题,实际上是显示在了swiper的第一页。