项目构建
- webpack + vue + vue-router + vueX + axios + antd of vue
起因
构建项目的时候由于 采用的 antd of vue ui库 ,里面没有类似点击唤醒遮罩层的组件 ,所以自己手写vue组件进行引入 ,主要用的是 css3 z-index 属性 ,通过z-index 值不同进行层级展示。( ps :之前处理过类似需求 ,由于用的是vant-ui)里面有自带的组件 所以就引入直接拿来用了。
经过
自认为写的写的代码上面逻辑是没有错误的,可结果却是 以下 。。。。
出现弹窗的时候,滑动底部z-index 属性不起作用。
更令人无语的是。。。。这个bug只是在ios端出现,pc端页面调试跟 真机调试时 Android端无任何问题。
处理
思考 :能引起层级显示出现问题的无非就两种情况
- 样式冲突
- 兼容性
因为这个项目构建的时候也引入了 公共的scss库 ,可是既然只有ios端出现问题那就绝不可能是样式冲突,只能是兼容性的问题了。
结果
后面科学上网才知道
…
safrai浏览器是把z-index直接忽略了。
借鉴