Вне экрана абсолютное позиционирование Div вызывает горизонтальную прокрутку

Question

РЕДАКТИРОВАНИЕ / ОБНОВЛЕНИЕ: 7 июня 2019

Я определил, что это ошибка в Safari, так как CSS отлично работает во всех других браузерах.Для тех, кто находит это, если вы создаете скользящее меню (которое скользит за пределами экрана справа от области просмотра), начиная с Safari 12.1.1, добавление overflow-x к тегу body будет не работать(это работает в Chrome, Firefox и т. д.) - это означает, что когда ваш div меню расположен за экраном вправо, пользователь может прокручивать горизонтально и видеть меню.

Я нашел (своего рода) обходной путь - дать родительскому контейнеру меню погружение в положение: фиксированный атрибут - это, очевидно, работает, только если вы намерены исправить свой заголовок.

Оригинальный вопрос

Я строю простой заголовок с меню, которое скользит справа налево при нажатии кнопки меню.Однако, когда я размещаю div меню за экраном (влево: 100%), в Safari я могу прокрутить горизонтально вправо, чтобы увидеть раздел меню.(Полосы прокрутки не появляются, но я могу прокрутить вправо с помощью мыши)

Если я установлю overflow-x:hidden в заголовке, то он скрывает экранный div, но также не будет отображаться, если вы установите left:0 (т. Е. overflow-x, кажется, скрывает направления x и y).

Еще большее недоумение, если я изменю заголовок на position:fixed, тогда он будет работать, и вы не сможете прокрутить вправо, чтобы увидетьзакадровое меню 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>

Вот пример проблемы: https://jsfiddle.net/ar7qyfgt/

Answer 1

У меня та же проблема в моем Safari (версия 12.1.1), когда я установил свой div в положение: абсолютное и правое: -15rem;

Чтобы исправить это, я добавил, чтобы включить все элементы ви иметь CSS как это:

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

Надеюсь, что это поможет.

Answer 2

То, что у вас есть, работает, вам нужно просто установить overflow-x:hidden на body вместо .header

Answer 3

Чего ты пытаешься достичь? Это?:

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