问题:

I'm developing iPad html5 webpage that needs to display pages from other origins (different domains).

I'm loading those pages into iframe, and scrolling the iframe using the iOs5 new scrolling ability, as shown in the code below.

<div id="myDiv" style="height: 1185px; width: 100%; overflow:scroll; -webkit-overflow-scrolling: touch;">
    <iframe id="myIframe" src="http://http://css-tricks.com/forums/discussion/11946/scrolling-iframe-on-ipad/p1"></iframe>
</div>

The problem is that the off-screen iframe content is not becoming visible when scrolling to it (the frame is blank).

How can I overcome this issue and provide scrollable iframe solution?

回答1:

OK. found the solution. apparently, the problem appear when the main document height is shorter than the iframe that is scrolled. the parts of the iframe page, that exceed the document height, are not rendered.

So, under my needs, I could solve the problem by adding such a js (with jquery) code:

<script>
$(function() {
     var iframe = $("#myIframe");    
     iframe.load(function() {
         $("body").height(iframe.height());
     });
 });
</script>

回答2:

If you have an access to iFrame body, apply some transform3d to its content. In my case adding -webkit-transform: translate3d(0, 0, 0); to main wrapping div did the job.