Safari 桌面中奇怪的 iframe 滚动行为答案

【问题标题】：Strange iframe scrolling behaviour in Safari desktopSafari 桌面中奇怪的 iframe 滚动行为
【发布时间】：2016-11-03 13:32:59
【问题描述】：

我找不到有关此问题的任何相关信息。

如果父容器有一个固定的高度和溢出：滚动，那么内部 iframe 没有正确滚动。它可以只滚动到底部或只滚动到顶部。但不是同时。

虽然如果我删除溢出效果很好：滚动；来自#outer 容器。

请看一下附上的代码 sn-p 并在 Safari 中运行。

目前，我使用的是 Safari 版本 9.0.3，OS X El Capitan 10.11.3

更新：我发现这个错误只能通过 Apple 输入设备、Magic Mouse 或触摸板来重现。查看视频： https://www.youtube.com/watch?v=2IpjAbWgbuc

我无法重现 sn-p 中的错误，所以这是实际的 html 页面：

https://s3-eu-west-1.amazonaws.com/plio/other/iframe_scroll_safari_issue.html

* {
  box-sizing: border-box;
}
#outer {
  height: 500px;
  width: 500px;
  margin: 0 auto;
  padding: 60px;
  overflow: scroll;
}
#inner1, #inner2 {
  height: 300px;
  margin-bottom: 50px;
}
#scrollable1, #scrollable2 {
  height: 100%;
  width: 100%;
  overflow: scroll;
}
#scrollable1 > *, #scrollable2 > * {
  border: 3px dashed;
  width: 100%;
}

<!DOCTYPE html>
<html>
  <body>

    <div id="outer">
      <div id="inner1">
        <div id="scrollable1">
          <img src="http://static.fjcdn.com/pictures/Long_3c2320_670942.jpg">
        </div>
      </div>
      <div id="inner2">
        <iframe id="scrollable2" src="https://plio.s3.amazonaws.com/uploads/KwKXz5RefrE5hjWJ2/standards-files/HLiWGZdNL5hifyRhJ/YCWzyS3XX2Wkko6tv-demo.docx.html"></iframe>
      </div>
    </div>

  </body>
</html>

【问题讨论】：

它似乎在我的 safari 上正常工作。在这里使用 9.1。
@adamk22 您使用的是普通鼠标还是 Apple Magic Mouse/Trackpad？

标签： html css iframe safari

【解决方案1】：

您可以通过将 iFrame 中的正文设置为 height: 100%; 来解决此问题

【讨论】：

【解决方案2】：

尝试将此 js 事件添加到您的 iframe：onmousewheel='event.preventDefault();'。如果这不起作用，请告诉我。

【讨论】：

不幸的是，它没有帮助。 https://i.gyazo.com/c5925594b7d58d1a1abf51fdd13c6be4.gif
尝试将onmousewheel 更改为onscroll
糟糕！改为添加onscroll='event.stopPropagation()'。对不起！
它也没有帮助我。事实证明，这可能是 Magic Mouse 或其他 Apple 原装输入设备的问题。