Off screen absolute positioned Div causing horizontal scrolling

EDIT/UPDATE: 7th June 2019

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 not 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.

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.

Original Question

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)

If I set overflow-x:hidden on the header, then it hides the offscreen div, but also won't show it if you set the left:0 (ie. overflow-x seems to be hiding x and y directions).

Even more perplexing, if I change the header to position:fixed, then it works and you can't scroll right to see the offscreen menu div.

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;
}

<div class="header">
  Header ---> Scroll to Right
  <div class="slideMenu">
    Menu is visible offscreen- :(
  </div>
</div>

Here's an example of the problem: https://jsfiddle.net/ar7qyfgt/

Solution

I have the same issue in my Safari(Version 12.1.1) when I set my div to position: absolute and right: -15rem;

To fix it, I added a to include all elements within and have the CSS like this:

.wrapper {
  position: relative;
  overflow-x: hidden;
}

Hope this help.