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

我在iOS Safari中发现了一个bug（我正在iOS 8上测试）。当绝对定位的iFrame浮动在可滚动内容的上方时，滚动iFrame也会滚动下方的内容。以下HTML复制了它：

<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，然后触摸绿色框左上角附近的拖动按钮，该按钮显示“拖动此处！”（开始拖动，使手指完全位于绿色框内，但也与下方的红色框重叠）。您将看到红色框滚动，而不是绿色框，如图所示：

相反，如果在绿色框内开始拖动，但没有与红色框重叠，则绿色框将按预期滚动

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

更新2015-09-18 您不需要iFrame来获得这种行为。签出，它只使用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上对此进行了测试，在这两种情况下，拖动绿色框时，红色框会滚动。在这种情况下，中描述的解决方法似乎没有帮助（或者至少我无法让它正常工作）。

刚刚找到了一个解决方案，该解决方案适合我

必须有一个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包含一系列表单字段有关。

看起来iOS 7 Safari中也会出现这种情况。你找到解决方法了吗？也解决这个问题吧-你找到解决方法了吗？我同意这是可行的，并且在iframe中引入了一些时髦的滚动行为。我们还没有在我们的应用程序中进行足够的测试来决定治疗是否比疾病更糟糕。另外，请查看我对原始问题的更新。