[Solved] Scrolling iframe on iPad

[TheLeggett]

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

[jimsilverman]

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?

[TheLeggett]

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.

[arkson82]

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!

[TheLeggett]

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

[jasonkeene]

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

[jasonkeene]

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/

[TheLeggett]

Thanks @jasonkeene – No Mac here :(

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

[bobjtls]

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:

…

[Historical Forums User]

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


[od1999]

Any news to this?

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

[shadab]

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

[jsixface]

Is this fix for a div or an iFrame ?

[Jonathan Nook]

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.

[Author]

Posts