在使用webpack + vue + vue-router + vueX + axios + antd of vue构建的项目中，遇到自定义组件时z-index在iOS端失效的问题。问题仅在iOS设备上出现，排查后确定为兼容性问题。解决方案在于Safari浏览器对待z-index的方式不同于其他浏览器，需要通过添加transform: translateZ(1000px)来解决层级显示问题，该方法对Android端无影响。
项目构建
- 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直接忽略了。
借鉴
最低0.47元/天 解锁文章
1545
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
