Grow your CSS skills. Land your dream job.

Scrolling iframe on iPad

  • # May 12, 2011 at 2:38 pm

    Hey folks,

    Having a lot of trouble figuring out how to scroll iframes on the iPad. Unfortunately, I don’t have an iPad for testing, and have been depending on a few kind people donating their time to help me out.

    Here’s the page I’m working on: http://theleggett.com/tools/webapptester/

    From what I’ve gathered so far:

    • iframes used to be scrollable on the iPad using two fingers. This functionality was removed in an update a few months ago.
    • iframes don’t respect overflow on iPad, and require an additional container surrounding the iframe with overflow:hidden
    • There is a possible javascript solution http://stackoverflow.com/questions/5267996/how-to-properly-display-an-iframe-in-mobile-safari/5359546#5359546, but it will only allow the user to interact with the content inside of the iframe if they own the content in the iframe. This iframe is meant to display content from outside of my control.

    I’ve exhausted one of my pals already having him test several different solutions. It’d be hugely appreciated if someone here can think of a way to make iframes work on the iPad.

    Thank you :)

    # May 12, 2011 at 3:35 pm

    to my knowledge, mobile safari doesn’t allow scrollable divs using CSS’s overflow property. i’m not sure if iframes behave differently.

    my best idea would be to use something like http://cubiq.org/iscroll to create a fixed-height, scrollable div with the full-sized iframe inside of it?

    # May 12, 2011 at 3:49 pm

    Thanks for the reply @jimsilverman. Unfortunately, it’s not feasible to create a fixed height iframe with a scrollable div outside of it, reason being the same origin policy for javascript. In other words, I can’t determine the height of a page in an iframe unless it’s on the same server. I won’t say it’s impossible to do something like this, just not by only using javascript/css to the best of my knowledge. I’d love to be proven wrong though.

    It really does seem that there is no simple solution for this. About ready to just set the height of the iframe to something like 10,000px for iPad users, and using a scrollable/hacked div just to get a fix out there. Really surprised this is difficult to pull off, and holding onto the hope that I’m just missing something.

    # May 12, 2011 at 8:53 pm

    Hi, to scroll a scrollable DIV on the iPad, you use two fingers to scroll within the DIV. I discovered this by accident some time back :-)

    This technique should work with an iFrame as well.

    UPDATE: sorry, should read previous comments! You already knew this!

    # May 12, 2011 at 9:02 pm

    Does that still work? Everything I’m reading, including a friend who’s tested this on their iPad has reported that two finger scrolling no longer works for iframes. Thanks for the suggestion @arkson82

    # May 12, 2011 at 9:15 pm

    You might want to check out using iPad/iOS simulator that comes with Xcode if you have a mac.

    http://developer.apple.com/library/ios/#DOCUMENTATION/Xcode/Conceptual/iphone_development/125-Using_iOS_Simulator/ios_simulator_application.html

    # May 12, 2011 at 9:23 pm

    Did a bit of googling and this looks like a decent article that will walk you through setting up Xcode and launching the simulator: http://www.mightymeta.co.uk/test-your-website-across-ios-devices-using-the-iphone-simulator/

    # May 12, 2011 at 9:25 pm

    Thanks @jasonkeene – No Mac here :(

    I’m sure that’s a good resource for others though.

    # September 27, 2012 at 1:17 am

    User csdco (https://github.com/fancyapps/fancyBox/issues/2#issuecomment-5997068) has provided a simple answer that solved the issue for me.


    It’s much easier to control overflowed divs than it is iframes, and the scrolling + blank content issues are working all the way back to iOS 4, where previously I wasn’t even able to get the 2 finger scrolling to work (in iframes).

    It goes something like this:

    a-file.html:


    # November 20, 2012 at 10:48 am

    A iframe scrolling fix for the good old jQuery Thickbox. Tested in Safari on iOS.

    First identify the touch device by adding the following javascript (jQuery):


    if ("ontouchstart" in document.documentElement){
    $('html').addClass('touch');
    }

    Then add the following line to thickbox.css:


    .touch #TB_window {
    height: 90%;
    -webkit-overflow-scrolling: touch !important;
    overflow: scroll !important;
    }

    # July 8, 2013 at 3:05 pm

    Any news to this?

    Got stuck at the same dead end myself: http://jsbin.com/avujix/24

Viewing 11 posts - 1 through 11 (of 11 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".