I'm currently working on a project that involves the use of the Material UI Drawer component.
However, I've encountered a specific issue when using an iPad, which presents two main problems: - The overlay does not appear above the navigation bar and content body - The drawer does not appear above the overlay
Upon inspection, it seems like this issue is related to z-index, potentially caused by the presence of "transform: translateZ(0px);"
Below is the HTML code for the rendered overlay:
<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>
And here is the main div rendered HTML for the drawer:
<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%;">
From the information provided above, we can see that the overlay has a z-index value of 1200, the drawer is set at 1300, and the navigation element holds a z-index of 1030.
It's worth noting that the Drawer functions smoothly in Chrome and Safari on Mac.