title: Off screen absolute positioned Div causing horizontal scrolling
body: <p><strong>EDIT/UPDATE:</strong> 7th June 2019</p>
  
  <p>I've determined this is a bug in Safari, as the CSS works perfectly in all other browser. For anyone who finds this, if you're creating a sliding menu (which slides offscreen to the right of the viewport), as of Safari 12.1.1, adding overflow-x to the body tag will <em>not</em> work (it does work on Chrome, Firefox etc) - this means that when your menu div is positioned offscreen to the right, the user can scroll horizontally and see the menu. </p>
  
  <p>I've found a (sort of) workaround is to give the parent container of the menu dive a position:fixed attribute - this obviously only works if you intend for your header to be fixed. </p>
  
  <p><strong>Original Question</strong></p>
  
  <p>I'm building a simple header with a menu that slides from right to left when the menu button is pressed. However, when I position the menu div offscreen (left: 100%), on Safari, I can scroll horizontally right to see the menu div. (No scroll bars appear, but I can scroll right via the Mouse)</p>
  
  <p>If I set <code>overflow-x:hidden</code> on the header, then it hides the offscreen div, but also won't show it if you set the <code>left:0</code> (ie. <code>overflow-x</code> seems to be hiding x and y directions).</p>
  
  <p>Even more perplexing, if I change the header to <code>position:fixed</code>, then it works and you can't scroll right to see the offscreen menu div. </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
  }
  
  .header {
    width: 100%;
    padding: 10px;
    background: #CCC;
    position: relative;
  }
  
  .slideMenu {
    position: absolute;
    top: 100%;
    left: 100%;
    width: 100%;
    padding: 10px;
    background: #666;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="header"&gt;
    Header ---&gt; Scroll to Right
    &lt;div class="slideMenu"&gt;
      Menu is visible offscreen- :(
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Here's an example of the problem: <a href="https://jsfiddle.net/ar7qyfgt/" rel="nofollow noreferrer">https://jsfiddle.net/ar7qyfgt/</a></p>