iframe on iOS (iPad) content cropping issue

Question

I'm looking for the correct way to assure that dynamically revealed content is visible after scrolling in an iframe on ipad / iOS5.

Oh Iframes and iPad - what a wonderful old chesnut you are. I know that:

• iPad expands iframes to the full height of the content within it (almost like it was using HTML5's "seamless" property, but not quite since it doesn't inherit styles or events from the parent). Bizarre, annoying to many, but true.
• <iframe height="100%"> is therefore useless since it sizes to its content not to the container

• I need to wrap my iframe in a div - a la

  <div id="wrapper" style="-webkit-overflow-scrolling:touch;overflow:auto;">
  <iframe width="100%" height="100%" src="about"blank"></iframe>
  </div>
  

• or else introduce some trickery to set the scroll position of the frame (which I think is based on tricks mentioned in this article)

My issue is that content that is dynamically shown inside the iframe body (e.g. jquery tabs, accordion, etc) may cause the browser to crop the content at the display extent of the page.

E.g. if my "tabs" are most of the way down the visible viewport inside the iframe and I perform a two-finger scroll (or implement the one finger scrollTop hack) then after that content is scrolled into view, some of its content that was previously not drawn remains undrawn. Clicking to a second tab / back again causes the content to appear as if the page doesn't draw off-screen content. After this, if I then scroll back up to the top of the page the content isn't drawn for the start of the page (which was previously visible). Scrolling the page up and down a few times with a two-finger scroll resolves the issue.

I had read this article that stated that the problem was fixed. But it doesn't seem to be fully fixed; and still doesn't get around the issue that because you have to wrap your iframe in a div and put scrollbars on that div, desktop browsers may show a double scrollbar depending on how they interpret overflow:auto.

p.s. I'm using HTML5 boilerplate page both inside and outside the iframe, with the correct meta viewport settings.

Answer 1

I found I was also able to solve the problem by making the document as tall as the iframe content. (As suggested Iframe Content Not Rendering Under Scroll In iOs5 iPad/iPhone) But in my case I didn't want the user to be able to scroll down in the now tall app, because its supposed to be a fullscreen application. I used this code to prevent vertical scrolling:

/*
Prevent Scrolling down.
 */
$(document).on("scroll",function(){
    checkForScroll();
});

var checkForScroll = function(e)
{
    var iScroll = $(document).scrollTop();
    if (iScroll > 1){
        // Disable event binding during animation
        $(document).off("scroll");

        // Animate page back to top
        $("body,html").animate({"scrollTop":"0"},500,function(){
            $(document).on("scroll",checkForScroll);
        });
    }
}

I evaluated a lot of options and wrote this blog post, including test code. http://dev.magnolia-cms.com/blog/2012/05/strategies-for-the-iframe-on-the-ipad-problem/

Hope this helps, Topher