15

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?

roee
  • 859
  • 1
  • 7
  • 20

2 Answers2

11

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>
roee
  • 859
  • 1
  • 7
  • 20
  • Anyone know how todo this with ExtJS or native JS as I don't have jQuery available there? – YvesR May 14 '12 at 11:37
3

If you have an access to iFrame body, apply some transform3d to its content to enable GPU rendering.

In my case adding -webkit-transform: translate3d(0, 0, 0); to main wrapping div did the job.

Anton Bielousov
  • 1,954
  • 2
  • 13
  • 11
  • This worked for me. In my case, I had to set this style on my frame which had `height: 100%` set in the CSS. – Gyum Fox May 18 '16 at 08:25
  • For me this didn't work and I created a new question: https://stackoverflow.com/questions/55068656/safari-mobil-iframe-content-out-of-view-not-rendered – Andreas Richter Mar 10 '19 at 16:22