Adapt Learning Community: Fullscreen state and iOS incompatibility

Hi sue.

The fix you mention is my 3rd point and causes my 2nd issue. It isn't the iframe content that scrolls it is the parent of the iframe which is scrolling. This fix means that the adapt toolbar will scroll out of screen and the notify won't calculate its height properly. The extension I've made overcomes this somewhat by allowing the content inside the iframe to fake-scroll but requires some extra work to get trickle going and yo induce scrolling when the notify and drawer are too large for the viewport. Otherwise the responsiveness works well with the extension.

Thanks for the response, but I had thoroughly considered the -webkit-overflow-scroll fix already whilst hacking around and want something far more robust.

I'll let you know if I get some more time to work on a full solution as it's a real shame adapt doesn't do what it should in an iframe on iOS. Finger's crossed I come up trumps. I've posted the code and the issues here to see if anyone else can help.

Cheers,

Ollie

Show parent | Reply

Hi Oliver,

Thanks for such a clear outline of the iFrame issues on iOS. It's the best summary I've seen - and that's after a lot of googling/stackoverflowing!

I'm grateful someone is taking a crack at this. Looking briefly at the code in github it's clear my very modest skills aren't going to offer much help with the outstanding issues, but I'm very happy to do some testing if that's ever of any help. Am I right that this should be treated like any other extension in terms of how it's installed and used?

Gareth

Show parent | Reply

It's not a problem, I quite enjoyed the challenge but it is a lot harder than I'd initially anticipated.

Assuming your LMS and Adapt content are being served from the same domain, the extension will inject javascript and styling into the iframe parent window and put some javascript and styling fixes into Adapt in the iframe content. So, yes it can be treated as a normal extension for installation and should 'just work' i.e. it'll make the parent iframe responsive. (I'm pretty sure it'll break the Authoring Tool though, as there is no schema - yet).

The extension is built in two stages. There are a series of styling and javascript fixes, these will have an effect on all containing iframes, in all browsers and will make the containing iframe responsive (on the assumption that the iframe should fill the window, i.e. that it is a full height + width iframe). The second stage is a preliminary attempt to overcome the iOS Safari problems, and that is the bit which isn't yet finished.

The last real iOS hitch is implementing my fake scrolling idea across all elements which require scrolling in Adapt. I'll have to build a little library to do this, but it is possible (in theory) to reimplement scrolling inside iframes using css 3d translation effects and a couple of touchstart/touchmove event handlers to capture the movement.

Testing, help and advice are always appreciated :D thanks for the friendly nudges!

Oh, the index.html file in the extension is really simple iframe for testing the fixes. Just build adapt and run it through that file or your own iframe file.

Show parent | Reply

Just discovered this thread.

We have discovered some major problems testing Adapt content within an iFrame on IOS devices.

This is a big problem as the LMS systems we use display all our courses within an iFrame.

We have chosen to use Adapt to produce responsive content that will run on phones and tablets so it is not going to be great if there are issues running Adapt content within an iFrame on IOS devices.

I was under the impression a lot of LMS systems use an iFrame to display courses but I may be wrong?

What is the latest take on this issue?

Show parent | Reply

https://github.com/cgkineo/adapt-iOSScrollFix

This repository might be worth a look. I've been meaning to give it a go but never had a chance. Would be glad to know if itworks and how to implement.

Show parent | Reply

Hi -- Coming back to this one after a while....

Is there an up-to-date, recommended approach for ensuring an Adapt course runs as well as it can on an iOS device via an iframe?

I'm aware of a couple of repositories related to this issue, specifically:

https://github.com/cgkineo/adapt-iOSScrollFix

https://github.com/oliverfoster/adapt-moodle

https://github.com/oliverfoster/adapt-responsiveIFrame

Are these still current / in use? Or has the framework updated to make these unnecessary? If they should still be used, is there a recommended combination?

Thanks for any advice/experience.

Show parent | Reply

ios scroll fix is the nearest one. but it's quite flakey.

the best approach so far it to have a launch page to remove the course from the iframe.

Show parent | Reply

Hi Ollie,

By 'have a launch page' do you mean that when the learner clicked on the course title in the LMS it would launch, say, 'launch.html' (this would be set in the manifest file) and then that launch page would have a launch button linked to Adapt's index_lms.html?

I also see there's adapt-launchNewWindow extension. Haven't had a chance to try it yet but does that do something similar?

Also, for anyone else who winds up in this thread there are a couple of related threads here and here which are very insightful. It seems Kallidus also uses an iframe, so the issue could be quite widespread.

Finally, I looked at iOS-scrollFix this morning and it requires a patch in Trickle's .js and LESS files. Those Trickle files seem to have been completely re-written subsequently so the patch instructions are out of date and unuseable.

Cheers,

Chris

Show parent | Reply

By 'have a launch page' do you mean that when the learner clicked on the course title in the LMS it would launch, say, 'launch.html' (this would be set in the manifest file) and then that launch page would have a launch button linked to Adapt's index_lms.html?

Pretty much, yes. It actually tries to open Adapt's index_lms.html automatically. The link to do so is there as a fallback in case of popup blockers. There's an example here.

I also see there's adapt-launchNewWindow extension. Haven't had a chance to try it yet but does that do something similar?

Yes it does and quite frankly I would go for this option.

Finally, I looked at iOS-scrollFix this morning and it requires a patch in Trickle's .js and LESS files. Those Trickle files seem to have been completely re-written subsequently so the patch instructions are out of date and unuseable.

Which patch instructions?

Show parent | Reply

I've updated the ios-scrollfix readme and the example branch on trickle so that it reads correctly.

The patch instructions we correct, they just weren't clear.

Show parent | Reply