Off screen absolute positioned Div causing horizontal scrolling

user_6251169 0
Viewed 3178

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/

safari css html
4 Answers

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.

user_104801360

I ran into a similar issue with Safari. Solution that appears to be working is to apply overflow-x: hidden; to the html AND body tags.

Adding to body resolved issue in all browsers expect Safari. Applying it to both seems to do the trick with Safari while still supporting the other browsers.

user_65909200

What you currently have works, you just need to set overflow-x:hidden on the body instead of the .header

user_20221030

What are you trying to accomplish? This?: enter image description here

JSFiddle: (https://jsfiddle.net/pzeqfb51/)

HTML:

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

CSS:

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 {
  display:inline-block;
}
user_112539800
Related