6

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.

daveGeo
  • 323
  • 1
  • 3
  • 9
  • I have the same issue. Did you manage to fix this? – Fabio Marzocca Nov 21 '17 at 09:16
  • I have a very similar issue where the material ui drawer component works fine on desktop chrome & safari but on mobile safari iOS the drawer appears to "go behind" the content of the page when open. I'm kind of at the end of my rope here front-end knowledge-wise. I've tried adjusting various z-index values on sibling elements. I've tried applying the knowledge from [this answer](https://stackoverflow.com/a/19572572/205930) but either I'm not applying it right or something else is going on. – Alex Jan 23 '19 at 19:46
  • 2
    Can you share your code please. – Olcay Ertaş Jan 23 '19 at 19:52
  • 2
    Can you make a jsfiddle or codepen so we can identify the issue? Because the output seems fine. – Jonas Praem Jan 24 '19 at 10:36
  • Quite hard to say without knowing the actual nesting of HTML structure, but did you tried 'position:fixed' for drawer also. – Guruling Kumbhar Jan 25 '19 at 02:56
  • @Alex what version of material-ui are you using? I have gathered many findings for this issue but providing the version would make my answer more relevant. If possible, please provide also the iOS / Safari version, and the type of drawer you are currently using – swipeable, temporary, permanent? – Siavas Jan 26 '19 at 14:23
  • See: https://stackoverflow.com/questions/5472802/css-z-index-lost-after-webkit-transform-translate3d That should help you. Good luck! –  Jan 30 '19 at 15:14

2 Answers2

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.

Adam Jenkins
  • 51,445
  • 11
  • 72
  • 100
0

This sounds similar as below issues.

webkit-transform breaks z-index on Safari

css z-index lost after webkit transform translate3d

Most common answer is adding 3d transform to parent. (common parent element of overlay and drawer, in this case)

I've solved similar issue by adding below.

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

Other than this, many solutions are posted in above pages.

Hope it helps.

taka
  • 1,407
  • 5
  • 7