Skip to main content

Forums

This topic contains 13 replies, has 10 voices, and was last updated by  Jonathan Nook 4 years, 8 months ago.

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #32710

    TheLeggett
    Member

    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 :)

    #76480

    jimsilverman
    Member

    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?

    #76484

    TheLeggett
    Member

    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.

    #76415

    arkson82
    Member

    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!

    #76413

    TheLeggett
    Member

    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

    #76411

    jasonkeene
    Member

    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

    #76412

    jasonkeene
    Member

    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/

    #76404

    TheLeggett
    Member

    Thanks @jasonkeene – No Mac here :(

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

    #110887

    bobjtls
    Member

    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:


    #114918

    Admire
    Member

    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;
    }

    #141940

    od1999
    Member

    Any news to this?

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

    #169890

    shadab
    Participant

    try to add CSS3 property [ -webkit-overflow-scrolling:touch; overflow:auto;] to the parent container. Worked fine!

    #182126

    jsixface
    Participant

    Is this fix for a div or an iFrame ?

    #184756

    Jonathan Nook
    Participant

    shadab, you’re a genious… thanks. This has fixed an issue that’s plagued me for a while now. Yes, jsixface. It was an iFrame that wouldn’t scroll for me, and now it does.

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

You must be logged in to reply to this topic.

icon-link icon-logo-star icon-search icon-star