iOS Safari - scrolling iFrame causes div underneath to scroll

Question

I've found what appears to be a bug in iOS Safari (I am testing on iOS 8). When an absolutely-positioned iFrame is floating above a piece of scrollable content, scrolling the iFrame also scrolls the content underneath. The following HTML (available on JSFiddle) reproduces it:

<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"/>

Load the JSFiddle in iOS 8 Safari, then touch-drag near the top left corner of the green box, where it says "Drag here!" (Start the drag so that your finger is entirely inside the green box, but also overlapping the red box underneath.) You will see the red box scroll instead of the green box, as shown in this image:

By contrast, if you start the drag inside the green box but NOT overlapping the red box, then the green box will scroll as you would expect.

I can't reproduce this behavior in any other browser. Has anyone else encountered this issue? Any known workarounds?

Update 2015-09-18

You don't need an iFrame to get this behavior. Check out this JSFiddle, which only uses divs:

<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>

I tested this on iOS 8.4 and 9.0, and in both cases, the red box scrolls when you drag the green box. The workaround described in Andrew's answer doesn't seem to help in this case (or at least I couldn't get it to work).

Answer 1

Just found this post which has a solution which sort of works for me.

You have to have a div wrapping your iframe with the following style

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

as well as positioning styles

Example from that page which is similar to what I got working:

.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%;
}

It's still a little janky in my case. Sometimes I have to touch something outside of the iframe before I can scroll the iframe again. It seems that if the outer container is still scrolling (eg - if you've just flicked the page and it keeps scrolling for a bit) you can't scroll the iframe. Some of the weirdness I'm seeing may also have to do with the fact that my iframe contains a bunch of form fields.