iphoneX和iphone11浏览器z-index失效问题解决办法

问题描述

使用swiper做轮播图，其中左右切换图片按钮在安卓手机或ios低版本浏览器正常显示，但是在iphoneX以上机型不显示，在图片下面，其中按钮是绝对定位，设置了z-index任然不能生效

图中的左右轮播按钮在安卓系统可正常显示，在苹果手机个别机型消失

原因

谷歌浏览器都是直接将一个盒子一个盒子理解成一块一块的，想分层就按照你的z-index高低来区分，而safari不是，safari是将整个浏览器的页面看成一个整体，虽然也是一块一块的，但是他的分层是按照视觉感来分层的，它认为在下面的代码块总比在上面的代码块离人的眼睛近，所以就应该覆盖在上面的代码块上面，不应该用z-index来区分，而是应该用视觉translateZ区分

代码

// transform属性中translateZ对Android端有没有影响,浏览器呈现原理不同，会被忽略
.icon-simple {
    z-index: 100; /*这里是给chrome用的*/
    transform: translateZ(100px); /*这里是给safari用的*/
}