最近用antd-mobile2.30,因为需求需要输入大量信息,因此用到了多层弹窗,然后发现在安卓中多层弹窗正常,但是在ios弹窗中的Modal.alert弹框的mask层无法正常显示
因此看了下它的css属性发现,wrap层存在z-index, translateZ两个属性在两个系统中渲染顺序的问题
.am-modal-wrp {
z-index: 999;
transform: translateZ(0.2667rem);
}
z-index在安卓中等级较高,而translateZ在ios中等级较高,这就造成了在遮罩层无法在ios中正常显示,因为wrap存在translateZ,所以始终在mask层上方,因此我们取消translateZ的更高,手动把它设置为0
.am-modal-wrp {
transform: translateZ(0);
}
这样就可以解决了,新版本就没有这个担忧了,新版本没有用到这个属性