iOS The scroll loses the menu navigation

[jupedega]

Subject of the issue/enhancement/features

Describe your issue here.

Your environment

• version (0.8.1/4.0.1)
• iOS 12.2
• Iphone 6s + Safari(s)

Steps to reproduce

To reproduce this bug in iOS I publish the course, before I put _scroollingContainer enabled.

Expected behaviour

What should happen is that the scroll will reach the end of the block, not the middle of the block where the video is.

Actual behaviour

When I try to scroll up to the limit of the trickle, it stays in the middle of the content. for example in the video, which is the first block with trickle.

When I try to force several times to slide, the menu is lost.

[oliverfoster]

There are some quirks with iOS iframes and screen size which are caused by Apple that haven't/won't be fixed:

1. iframes: height scroll
2. screen size: Viewport height bug Comment from apple Viewport units on mobile

iFrame height - _scrollingContainer forces the iframe content to be 100% of the height of the iframe, which stops the iframe becoming the height of the Adapt content and instead allows it to become the height of the available viewport, which is what is needed for scrolling overflow to work.

iFrame scroll - _scrollingContainer forces Adapt to use this technique inside the iframe rather than outside of the iframe to allow the Adapt content to scroll as expected.

Viewport height - The large-height/small-height problem is still an issue as _scrollingContainer uses height: 100% which changes as a px value when the browser chrome appears and disappears on the browser window scroll, the idea of setting the height to 100% is that the iframe will start at the small size of the browser and not overflow the window, preventing the browser window from scrolling and tripping into the large height. Note: Due to scroll bouncing this doesn't work all of the time.

These above techniques allow us to ensure that the iOS iframe is the height of the viewport, that the content scrolls inside the iframe, that Adapt is able to control the scrolling container and that the large-height/small-height bug is much less of an issue.

That is to say, without the _scrollingContainer, when displaying Adapt inside an iframe on iOS, the iframe content doesn't scroll inside the iframe and therefore Adapt cannot control the scroll, the navigation bar is not fixed to the top of the viewport, the iframe height is the height of the Adapt content and the view port height will change from small to large when the browser chrome is hidden for the first time. As some Adapt extensions rely heavily on being able to control the scroll, they break (trickle, pageLevelProgress).

You are launching the course inside an iframe on iOS Safari, did you read this wiki page on the _scrollingContainer property?

Can I have a copy of your _scrollingContainer json? The ticket isn't clear.

To reproduce this bug in iOS I publish the course, before I put _scroollingContainer enabled.

Does this mean _isEnabled: true or _isEnabled: false?

[jupedega]

Thank you so much for the quick anwser. I pass you an image with the configuration.

"_scrollingContainer": { "_isEnabled": true, "_limitToSelector": ".os-ios" },

Actually, it's the same thing that I've seen in the image

[oliverfoster]

Can I have a copy of your course?

It is clear that your browser height has moved from small height to large height because it is hiding under the browser chome.

It might be that the video height resized after the page loaded and trickle hasn't updated its height to compensate.

The only ways to find out what is happening is for me to have a look and/or for you to update your framework and plugins to the latest versions. _scrollingContainer was added with the 4.0.0 release, you are on 4.0.1, there have been a few fixes since then to the framework (now at 4.2.0), trickle and media.

[jupedega]

Thanks. How can I pass the export course?

[oliverfoster]

https://gitter.im/adaptlearning/adapt_framework You can drop the exported zip into a private chat with me in gitter.

[jupedega]

Do it...

[oliverfoster]

Fixed by back injecting styling into moodle container document.

var lmsDocument = window.top.document;
var $newStyling = $("<style>#scorm_layout { height: 100vh !important; }</style>", lmsDocument);
$('head', lmsDocument).append($newStyling);

Moodle sets the #scorm_layout (iframe container div) height to the size of the screen on ios (680px), rather than the available window space (553px).

This means that the moodle container document and the adapt content are both able to scroll. The moodle container is only able to scroll by 127px which is enough to hide the adapt navigation bar under the browser chrome.

(The solution only works where the iframe content document and moodle container document have the same domain.)