title: Z-Index issue on iOS using Material UI Drawer component
body: <p>I am using the Material UI Drawer component in a project.</p>
  
  <p>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</p>
  
  <p>From what I can tell this seems to be a z-index related issue; potentially related to the use of "transform: translateZ(0px);"</p>
  
  <p>Here is the rendered html of the overlay:</p>
  
  <pre><code>&lt;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;"&gt;&lt;!-- react-empty: 149 --&gt;&lt;/div&gt;
  </code></pre>
  
  <p>Here is the main div rendered html of the drawer:</p>
  
  <pre><code>&lt;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%;"&gt;
  </code></pre>
  
  <p>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.</p>
  
  <p>The Drawer otherwise works perfectly in Chrome and Safari on Mac.</p>