title: iFrame on iPad not showing content underneath frame
body: <p>I see this problem elsewhere, and I've tried implementing this solution here: <a href="https://stackoverflow.com/a/8923541">https://stackoverflow.com/a/8923541</a></p>
  
  <p>The issue, though, is that the overall body is then scrollable, because the height of the body has been set to the overall height of the iframe. I don't want the main page to scroll at all (we have a set height for the header, and the footer, and an iframe that scales to fit the rest of the height of the page). Setting the body to overflow: hidden turns off the scrolling in the iframe. </p>
  
  <p>Here's a simple test version I've been working with:</p>
  
  <pre><code>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt;
  &lt;head&gt;
  &lt;title&gt;Iframe Test&lt;/title&gt;
  &lt;script src="js/jquery.js"&gt;&lt;/script&gt;
  &lt;script&gt;
  $(function() {
  var iframe = $("#frame");    
  iframe.load(function() {
  $("body").height(iframe.height());
  });
  });
  &lt;/script&gt;
  
  &lt;style&gt;
  
  body { overflow: hidden;}
  
  
  #frame {
  height: 100%;
  width: 100%;
  }
  
  #maincontent {
  height: 300px;
  -webkit-overflow-scrolling: touch;
  overflow: scroll;
  }
  
  &lt;/style&gt;
  
  
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;div id="maincontent"&gt;
  &lt;iframe src="working2.php" id="frame" name="frame" frameborder='0' scrolling="no"&gt;
  &lt;p&gt;Your browser does not support iframes.&lt;/p&gt;
  &lt;/iframe&gt;
  &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Has anybody got an actual working sample of an iframe with single touch scrolling? I can't get this to work after spending several hours on it and reading through tons of posts about it. I'm obviously doing something wrong, but can't figure it out.</p>