Picture of fergus beake
Scrolling content within Iframes on IOS
by fergus beake - Wednesday, 26 July 2017, 3:14 PM


I'm currently working to make my content responsive within multiple layers of Iframe, My SCORM being Iframes to a Course on a remote site. So far I've been mostly successful.

However, when a website that uses IFrames in popups, such as Moodle, scrolling on the course is no longer responsive.


Is it at all possible to make my inner iFrames, get selected over the outer ones, without making any changes to the CSS on the outer page?

Picture of Oliver Foster
Re: Scrolling content within Iframes on IOS
by Oliver Foster - Wednesday, 26 July 2017, 6:07 PM

You're using responsive to two different ways... It's a little confusing. You want the iframe to size itself correctly (responsively) and you want the scrolling to work properly (to respond to user input)... I think?

There are a whole lot of reasons why you should give up, and may I suggest that you do?

Take a look at adapt-launchNewWindow. This is really the only solution to your problem - forcing the content to load in a new window on ios.

But... If you really want to get your head around why you should do that...

Look at adapt-moodle which was my original attempt to do what you're suggesting... it modifies the parent window of the iframe to inject javascript and css to make sure the iframe is responsive in size relative to it's parent (you have to size the iframe in pixels otherwise they take the content height and not the window height). Second to that, you need to stop using the html+body tags to do scrolling inside the iframe... because that's broken... instead the wrapper should be moved inside a container div which manages the scrolling, which means you need to hack jquery.scrollTo to stop it taking the window.scrollY, and use a bit of -webkit-overflow-scrolling: touch to get the smooth scrolling working... you can see that in action in adapt-iosScrollFix.

Even after those suggested fixes, you're still going to have position: fixed issues (which means trickle, navigation bar and notify problems) css rendering issues, general laggyness and lots of rerendering, layout thrashing, tearing, etc etc, ios was never really designed to support iframes with scrolling content...


If you've got nested iframes... god help you... :/


Kind Regards,