Iframes and the Safari on the iPad, How Can the User Scroll the Content

IFRAMEs and the Safari on the iPad, how can the user scroll the content?

iOS 5 added the following style that can be added to the parent div so that scrolling works.

-webkit-overflow-scrolling:touch

Can't scroll iframe on mobile iOS Safari

Take care of the position Attribute.

<iframe src="www.website.com/" style="position:absolute; top:0px; left:0px; bottom:0px; right:0px; width:100%; height:100%; border:none; margin:0; padding:0; overflow:hidden; z-index:999999;">
Your browser doesn't support iframes
</iframe>

I set the position to "absolute" and it has fixed it.

*also play with those attributes:

scrolling="no" (or "yes", depends on your need)

overflow: scroll; (or instead of "scroll", use one of those: visible|hidden|auto|initial|inherit;)

iOS Safari - scrolling iFrame causes div underneath to scroll

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.

iOS mobile: scrolling in iFrame within scroll-able parent

Place your <iframe>s in wrappers with -webkit-overflow-scrolling: touch;

.iContainer {
  -webkit-overflow-scrolling: touch;
}

#outside {  height: 400px;  width: 200px;  background: blue;  overflow: scroll;}
.space {  height: 200px;  width: 200px;  background: red;}
iframe {  height: 1000px;  width: 200px;  background-color: green;  border: none;  display:block;}
iContainer {  -webkit-overflow-scrolling: touch;}

The green section is the iFrame.... Scrolling on the green section in iOS mobile is the issue
<div id="outside">  <div class="space"></div>  <div class="iContainer">    <iframe>    </iframe>  </div>  <div class="space"></div></div>