关闭模式向上移动 body 并在 chrome 中中断滚动

Question

当我从 53 更新到 Chrome 55 时，这开始发生在 chrome 时。我正在使用 WordPress 和 Foundation 并打开媒体管理器以在表单上添加文件。我没有添加任何文件，只是关闭 window。一旦我关闭了模式，页面就会跳到页脚，然后我只能向上滚动大约一半（如果有区别的话，隐藏顶部 1700 像素），然后滚动条停止，我无法再向上滚动。我可以进入检查并在顶部添加 1700 像素的填充，然后再次查看所有内容。它还在模式打开之前不存在的页脚下方添加了一堆白色 space，因此看起来它保持滚动条相同大小但只是将所有内容向上移动。

我有一些 CSS 设置：

body {
  overflow-y: hidden;
  position: relative;
}

body, html {
  width: 100%;
  overflow-x: hidden;
  position: relative;
}

我也试过在 body 上修改 'open-modal' class 但没有成功

body.open-modal {
  overflow-y: auto;
  position: fixed;
}

我查看了所有内容，body 中除了导航栏外没有固定元素。这不会发生在 Firefox 50 或 IE 11 上。

Answer 1

这不是一个完美的修复，但它似乎有效。我在基金会论坛上找到 this answer，然后将我的 CSS 更改为：

body.modal-open {
  overflow: visible;
}

现在，当模式打开时，我的内容下方仍会出现大量白色 space，但滚动条会变长，因此我可以向上滚动到顶部。关闭模态现在让我回到我点击打开模态并将滚动条恢复正常的位置。这似乎是 Foundation 5 的问题。

关闭模式向上移动 body 并在 chrome 中中断滚动

Closing modal shifts body up and breaks scroll in chrome

css

wordpress

jquery

google-chrome

zurb-foundation