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.
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.
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.
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
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).
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:
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 :)
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?
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.
This technique should work with an iFrame as well.
UPDATE: sorry, should read previous comments! You already knew this!
http://developer.apple.com/library/ios/#DOCUMENTATION/Xcode/Conceptual/iphone_development/125-Using_iOS_Simulator/ios_simulator_application.html
I'm sure that's a good resource for others though.
maybe u can try tis in ur iframe
UR CONTENT<!--
style="overflow:auto; -webkit-overflow-scrolling: touch; border:#0C9 1px solid;"
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:
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; }