iOS上的Z-Index问题使用Material UI Drawer组件

Question

我在项目中使用Material UI Drawer组件.

我有一个iPad的特定问题,据我所知,导致两个问题: - 叠加没有出现在导航栏和正文内容之上 - 抽屉没有出现在叠加层的顶部

据我所知,这似乎是与z指数相关的问题; 可能与"transform:translateZ(0px);"的使用有关

这是叠加层的渲染html:

<div style="position: fixed; height: 100%; width: 100%; top: 0px; left: 
0px; opacity: 1; background-color: rgba(0, 0, 0, 0.541176); -webkit-
tap-highlight-color: rgba(0, 0, 0, 0); will-change: opacity; transform: 
translateZ(0px); transition: left 0ms cubic-bezier(0.23, 1, 0.32, 1) 
0ms, opacity 400ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; z-index: 1200; 
pointer-events: auto;"><!-- react-empty: 149 --></div>

这是抽屉的主要div渲染html:

<div style="color: rgb(255, 255, 255); background-color: rgb(0, 0, 0); 
transition: transform 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; box-
sizing: border-box; font-family: Roboto, sans-serif; -webkit-tap-
highlight-color: rgba(0, 0, 0, 0); box-shadow: rgba(0, 0, 0, 0.156863) 
0px 3px 10px, rgba(0, 0, 0, 0.227451) 0px 3px 10px; border-top-left-
radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 
0px; border-bottom-left-radius: 0px; height: 736px; width: 200px; 
position: absolute; z-index: 1300; left: -207px; top: 0px; overflow: 
auto; -webkit-overflow-scrolling: touch; margin-left: 50%;">

从上面可以看出,叠加层的z-index为1200,抽屉为1300,nav元素的z-index为1030.

否则,抽屉在Mac上的Chrome和Safari中完美运行.

Answer 1

这听起来与下面的问题类似。

webkit-transform 破坏了 Safari 上的 z-index

webkit转换translate3d后css z-index丢失

最常见的答案是向父级添加 3d 变换。（在本例中，覆盖层和抽屉的共同父元素）

我通过添加以下内容解决了类似的问题。

-webkit-transform: translate3d(0px, 0px, 0px)

除此之外，上面的页面中还发布了许多解决方案。

希望能帮助到你。