css - 苹果浏览器 OSX : overflow-y: scroll is forcing element to hide overflowing elements horizontally

Question

我的问题如下:

我有一个 div，它有一组按钮，每个按钮都有一个与其关联的弹出窗口。

<div id="floatingFilter">
  <div class="div-1">
    <button class="popupActivator">Trigger Popup</button>
    <div class="popupContainer"><span>This is my popup.</span></div>
  </div>
</div>

CSS:

#floatingFilter {
  height: 100%;
  width: 200px;
  overflow-y: scroll;
  position: fixed;
  top: 0px;
  right: 0px;
}
.popupContainer {
  position: fixed;
  right: 190px;
  top: 100px;
  width: 100px;
  height: 100px;
}

当我在 Safari OSX 上打开弹出窗口时，我只能看到 popupContainer 的前 10px。其余部分是隐藏的。

有人遇到过这个问题/有解决方案吗？它适用于其余浏览器。

参见 plunker

Answer 1

这是因为你设置了position:fixed。这将不允许它滚动。如果您删除此规则，则它可以正常工作。

演示 http://jsfiddle.net/wtTLf/