- This topic is empty.
-
AuthorPosts
-
May 12, 2011 at 2:38 pm #32710
TheLeggett
MemberHey 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 #76480jimsilverman
Memberto 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 #76484MemberThanks 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 #76415arkson82
ParticipantHi, 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 #76413MemberDoes 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 #76411jasonkeene
MemberYou might want to check out using iPad/iOS simulator that comes with Xcode if you have a mac.
May 12, 2011 at 9:23 pm #76412MemberDid 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 #76404MemberThanks @jasonkeene – No Mac here :(
I’m sure that’s a good resource for others though.
September 27, 2012 at 1:17 am #110887bobjtls
MemberUser 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 #114918Historical Forums User
ParticipantA 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 #141940od1999
MemberAny news to this?
Got stuck at the same dead end myself: http://jsbin.com/avujix/24
May 12, 2014 at 9:12 am #169890shadab
Participanttry to add CSS3 property [ -webkit-overflow-scrolling:touch; overflow:auto;] to the parent container. Worked fine!
September 8, 2014 at 6:25 am #182126jsixface
ParticipantIs this fix for a div or an iFrame ?
September 25, 2014 at 6:55 pm #184756Jonathan Nook
Participantshadab, 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.
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.