Ant-design-mobile: 在同时显示两个及以上的modal时,后面的modal均没有遮罩层,此bug只在ios上出现。

Created on 17 Sep 2020  ·  1Comment  ·  Source: ant-design/ant-design-mobile

  • [ ] I have searched the issues of this repository and believe that this is not a duplicate.

Reproduction link

https://codepen.io/paranoidjk/pen/LWpaKe

Steps to reproduce

https://codepen.io/paranoidjk/pen/LWpaKe

What is expected?

每个modal的遮罩层正常显示

What is actually happening?

在同时显示两个及以上的modal时,后面的modal均没有遮罩层,此bug只在ios上出现。

| Environment | Info |
|---|---|
| antd-mobile | 2.3.1 |
| React | 16.9.11 |
| System | iphone11 |
| Browser | safari |

Most helpful comment

ios上 z-index属性与transform: translateZ 冲突。 ant 在
.am-modal-wrap 使用了 transform: translateZ(1px) 在.am-modal-mask没有使用导致。目前解决办法 添加css .am-modal-mask,
.am-modal-wrap {
transform: translateZ(1px);
}

>All comments

ios上 z-index属性与transform: translateZ 冲突。 ant 在
.am-modal-wrap 使用了 transform: translateZ(1px) 在.am-modal-mask没有使用导致。目前解决办法 添加css .am-modal-mask,
.am-modal-wrap {
transform: translateZ(1px);
}

Was this page helpful?
0 / 5 - 0 ratings