屏幕外绝对位置Div导致水平滚动

Question

编辑/更新： 2019年6月7日

我确定这是Safari中的错误，因为CSS在所有其他浏览器中均可正常运行。对于任何发现此问题的人，如果您要创建的是滑动菜单（在视口右侧向屏幕外滑动），则从Safari 12.1.1开始，将overflow-x添加到body标签将不是可以正常工作（它确实可以在Chrome，Firefox等上运行）-这意味着当菜单div不在屏幕右侧时，用户可以水平滚动并查看菜单。

我发现一种（多种）解决方法是为菜单的父容器提供一个位置：固定属性-显然，这仅在您打算固定标题的情况下才有效。

原始问题

我正在构建一个带有菜单的简单标题，当按下菜单按钮时，菜单会从右向左滑动。但是，当我将菜单div置于屏幕外（左：100％）时，在Safari上，我可以向右水平滚动以查看菜单div。 （没有滚动条出现，但是我可以通过鼠标向右滚动）

如果我在标题上设置了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

当我将div设置为position时，在Safari（版本12.1.1版）中存在相同的问题：绝对和正确：-15rem;

要解决此问题，我添加了一个，以包含其中的所有元素，并使CSS像这样：

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

希望获得帮助。

Answer 2

我在 Safari 上遇到了类似的问题。似乎有效的解决方案是将 overflow-x: hidden; 应用于 html AND body 标签。

在除 Safari 之外的所有浏览器中添加到正文已解决的问题。将它应用于两者似乎可以在 Safari 上奏效，同时仍然支持其他浏览器。

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

Answer 4

您目前拥有的作品，您只需要在overflow-x:hidden上设置body，而不是.header