Menu
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.
319
To set the background color of the Material UI drawer, we call the makeStyles function to create the styles. Then we can apply the styles with the useStyles hook returned by makeStyles . We call makeStyles with an object that has the properties set to objects with the styles.
You set z-index on a static element By default, every element has a position of static. z-index only works on positioned elements (relative, absolute, fixed, sticky) so if you set a z-index on an element with a static position, it won't work.
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.
124
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
