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，然后触摸 - 拖动绿色框的左上角附近，在那里显示＆＃34;拖到这里！＆＃34; （开始拖动以使您的手指完全位于绿色框内，但也与下方的红色框重叠。）您将看到红色框滚动而不是绿色框，如下图所示：

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

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

更新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有一个适合我的解决方案。

您必须使用以下样式包装iframe的div

-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包含一堆表单字段的事实有关。