Flickering after embedding H5P in Moodle

Today I embedded H5P "fill in the blanks" in a page-resource and a lesson-resource in Moodle. After that, both the page and the lesson started to flicker on all my devices. The page and the lesson also contain other embedded H5P code (though in the lesson not on the same content page). The Moodle-activity "stealth mode" (activity invisible, but accessible) was activated at first, deactivated at the end, but the flickering continued.

Thank you for the access and a student role is enough for me to check.

I was able to see the content but not the flickering that you described. Having said this it could be some issue with the browser, plugins or something else in your computer not unless your students or any other user is seeing the same issue. Below are my test environment:

After checking with an IT-friend and reading Rachels message, it seems to be connected with mobile devices indeed, in my case: iPhone and iPad (newest software versions). Did you by any chance also test on a mobile device?

We also notices this odd behaviour on iOS devices. Tested on both Chrome and Safari on iPhone X and iPad (early gen). It seems to be that iOS handles resizing of iframes seperately as removing of h5p-resize.js from embedded content code removed the flickering.

Unfortunately resize script (h5p-resizer.js) is needed for other browsers to allow them to resize the H5P iframe so for a quick fix I have added a check to the resize script which looks for iOS devices and if found then resizing of iframe by the script will not happen.

I am not sure if this is the best way to fix it but maybe it helps out and something like this could be added with updates?

Having the H5P filter installed (https://moodle.org/plugins/filter_h5p) seems to fix the problem with the flickering. Unfortunately I can't test it on the same (production)server where the flickering occurred. One drawback is that the fullscreen mode button doesn't have any effect neither on Ipad IOS 9 nor on Iphone IOS 11 allthough this couldn't be checked without the filter installed due to the unfunctional view.

Unfortunately I've got bad news as in opposite to my last message the flickering on our production site hasn't disappeared. This makes me think it must have something to do with the H5P atto plugin hack (found here: https://github.com/h5p/h5p-moodle-plugin/issues/30) because on the website where there is no flickering this hack is installed.

I can't proof it though because both systems are running different moodle versions and themes (based on boost).

Is there a timeframe for solving the flicker-issue? It would be nice to know if a fix will be ready in the near future. H5P is a great technology and we are depending on it in our moodle 3.4 installation.

We have a moodle with 40,000 users and the courses all use the H5P plugin. In the one course where we have embedded the H5P in the moodle lesson, this ios flickering screen issue has become a major issue for us. We tried the fix suggested, but that only works for the ipad device. (see our results posted in this thread)

We're hoping for a complete fix soon. Any ETA set for this? Can we help in anyway to see this fix through?

I have just come across a new finding which might lead us into the right direction.

I was able to click the fullscreen button (wasn't easy because of the fast moving/flickering screen) but believe it or not: flickering stopped!

Unfortunately I can't debug what's happening on my Ipone but I am now sure it has something to do with the called functions for fullscreen/normal view. Hopefully one of the developers can look a bit deeper into this and offer a fix. We are so much depending on this because many of our users (if not most of them) will be using mobile devices for running through our elearning.

Has there been any progress on this bug? We have around 20% of our users accessing our content via Safari on iOS and create a lot of content via H5P. This is a really valuable tool that we want to still keep using.

Hi,As I wrote in comments above the flickering issue is due to how Safari handles CSS in responvie iFrames differently than everyone else.I can see that you have a "fix" in the pipleine.... but as I see it that is not the way this should be solvedTo me it's a workaround not a solution

There is a fix stated here and this has been deployed. Although there have been some complications and also a suggestion from Martin. The ticket has been reopened and the core team is looking in to it.

So I found out today that my previous fix did not work 100%. I am more of a backend developer than front end so please someone who loves CSS, look into how this is done. Should work as expected now I hope.

The change I did was move h5p-fullscreen to make it only trigger when the class is within the body: > body.h5p-fullscreen

Everything we need to solve this flickering problem is already in place. The CSS just needs tweeking. No javascript is necessary for this.