iOS Safari - 滚动 iFrame 会导致下面的 div 滚动

Question

我发现似乎是 iOS Safari 中的一个错误（我正在 iOS 8 上进行测试）。当绝对定位的 iFrame 浮动在一段可滚动内容上方时，滚动 iFrame 也会滚动下方的内容。以下 HTML (available on JSFiddle) 复制了它：

<div style="width:200px;height:200px;overflow:auto;-webkit-overflow-scrolling:touch;">
    <div style="width:500px;height:500px;background-color:red">Test</div>
</div>
<iframe scrolling="no" style="position:absolute;z-index:10000;left:50px;top:50px;width:200px;height:200px" src="http://randscullard.com/LinkedItems/iOSFrameScrollIssue.htm"/>

在 iOS 8 Safari 中加载 the JSFiddle，然后在绿色框的左上角附近触摸拖动，其中显示“拖动到这里！” （开始拖动，使您的手指完全位于绿色框内，但也与下方的红色框重叠。）您将看到红色框滚动而不是绿色框，如下图所示：

相比之下，如果您在绿色框内开始拖动，但没有与红色框重叠，则绿色框将按照您的预期滚动。

我无法在任何其他浏览器中重现此行为。有没有其他人遇到过这个问题？任何已知的解决方法？

2015-09-18 更新

您不需要 iFrame 即可获得此行为。查看this JSFiddle，它只使用了div：

<div style="width:200px;height:200px;overflow:auto;-webkit-overflow-scrolling:touch;">
    <div style="width:500px;height:500px;background-color:red">Test</div>
</div>
<div style="position:absolute;z-index:10000;left:50px;top:50px;width:200px;height:200px;background-color:green">Drag here!</div>

我在 iOS 8.4 和 9.0 上对此进行了测试，在这两种情况下，当您拖动绿色框时，红色框会滚动。 Andrew's answer 中描述的解决方法在这种情况下似乎没有帮助（或者至少我无法让它工作）。

Answer 1

刚找到这个post，它有一个适合我的解决方案。

你必须有一个 div 用以下样式包裹你的 iframe

-webkit-overflow-scrolling: touch;
overflow-y: scroll;

以及定位样式

该页面的示例与我的工作类似：

.demo-iframe-holder {
  position: fixed; 
  right: 0; 
  bottom: 0; 
  left: 0;
  top: 0;
  -webkit-overflow-scrolling: touch;
  overflow-y: scroll;
}

.demo-iframe-holder iframe {
  height: 100%;
  width: 100%;
}

就我而言，它仍然有点笨拙。有时我必须先触摸 iframe 之外的东西，然后才能再次滚动 iframe。似乎如果外部容器仍在滚动（例如 - 如果您刚刚轻弹页面并且它继续滚动一点），则您无法滚动 iframe。我看到的一些奇怪现象也可能与我的 iframe 包含一堆表单字段这一事实有关。