Z-Index issue on iOS using Material UI Drawer component

Question

I am using the Material UI Drawer component in a project.

I am having a specific issue with an iPad which causes two issues as far as I can see: - Overlay is not appearing on top of the nav bar and body content - Drawer is not appearing on top of the overlay

From what I can tell this seems to be a z-index related issue; potentially related to the use of "transform: translateZ(0px);"

Here is the rendered html of the 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>

Here is the main div rendered html of 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%;">

As you can see from the above, the z-index of the overlay is 1200, the drawer is 1300 and the nav element has a z-index of 1030.

The Drawer otherwise works perfectly in Chrome and Safari on Mac.

Answer 1

position: fixed with z-index of 1200 can easily trump position: absolute of z-index: 1300 if the absolute positioned div is a descendant of another positioned parent with a z-index of lower than 1200

Those z-indexes are not comparable because one is on a fixed and one is on an absolute. The closest positioned parent of a fixed element is always the window, while the closest positioned parent of an absolute element could be anything, so they're (most likely) not in the same stacking context.

You really need to show the rest of your code.