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 - w

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