Iframe content not showing under scrolling in iOS5 iPad / iPhone

Question

I am developing an iPad html5 webpage that should display pages from a different source (different domains).

I load these pages in an iframe and scroll through the iframe using the new iOs5 scroll, 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 does not become visible when scrolling to it (the frame is empty).

How can I solve this problem and provide a scrollable iframe solution?

Answer 1

OK found a solution. apparently the problem occurs when the height of the main document is shorter than the scrollable iframe . parts of the iframe that are larger than the height of the document are not displayed.

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

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

Answer 2

If you have access to the iFrame body, apply some transform3d to its contents to enable rendering using the GPU.

In my case, adding -webkit-transform: translate3d(0, 0, 0); to the main packaging tag has done its job.