离屏绝对定位 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

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

添加到正文解决了除 Safari 之外的所有浏览器中的问题。将其应用于 Safari 似乎可以达到目的，同时仍然支持其他浏览器。