title: Issue with Safari elastic scroll and fixed position elements that have a lower z-index
body: <p>I have a div <code>.main-container</code> and behind it are 2 divs with lower z-index's one on the left <code>.left-drawer</code> of the page one on the right <code>.right-drawer</code>. </p>
  
  <p>Both are drawers, when triggered the <code>.main-container</code> moves to the left or to the right to reveal each drawer.</p>
  
  <p>This all works fine, my issue is that due to Safari's elastic scroll when you scroll to the top or bottom of the page the <strong>fixed divs</strong> with <strong>lower z-index's</strong> are visible. This happens on both Desktop and Mobile.</p>
  
  <p>Is there a way to stop this? Here's a simplified version:</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="drawer left-drawer"&gt;
    Left Drawer
  &lt;/div&gt;
  
  &lt;div class="drawer right-drawer"&gt;
    Right Drawer
  &lt;/div&gt;
  
  &lt;div class="main-container"&gt;
    Main Content
    &lt;a href="#" class="open-left-drawer"&gt;Left&lt;/a&gt;
    &lt;a href="#" class="open-right-drawer"&gt;Right&lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.drawer {
  position: fixed;
  display: block;
  overflow-y: auto;
  overflow-x: hidden;
  top: 0;
  bottom: 0;
  z-index: 1;
  }
  
  .left-drawer {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1;
  }
  
  .right-drawer {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 1;
  }
  
  .main-container {
  position: relative;
  overflow: hidden;
  z-index: 99;
  left: 0;
  right: 0;
  }
  </code></pre>