Flickering after embedding H5P in Moodle

Hi all,

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.

It seems like a programming error. Does anyone know what to do?

My Moodle-version: 3.5.3
My H5P-version: 1.14
Laptop (Ubuntu), iPhone and iPad
Firefox and Safari
Fill in the blanks (perhaps also others)
PHP seems to be fine.

Many thanks for helping out.

Kind regards,

Ralf

PS I have a video showing the flickering, but I can't upload it as MP4 is not allowed here.

 


 

BV52's picture

Hi Ralf,

In order to give your bug report the best chance of getting answered, please include the following information:

  1. Any browser console errors
  2. Any PHP errors

-BV52

Hi BV52,

Thanks for your answer - there are no browser console errors, and no PHP errors.

Hope you or someone can help. Have a nice day!

Kind regards,

Ralf

 

BV52's picture

Hi Ralf.

Thank you for the information. I am unable to reproduce the issue on my end. Would it be possible to share a sample URL so that we can check. 

-BV52

Hi,

Yes, that's possible. You could create an account at https://moodle.westaal.de and I will give you then access to the relevant Moodle-course.

Or I send you the video I made (by mail?).

Is this allright for you, or would you prefer another way?

Many greetings,

Ralf

BV52's picture

Hi Ralf,

I registered on the site and will be waiting for the e-mail. I think this is a better way to check since I'll be using my system and I might find a clue to what might be causing this.

-BV52

Hi BV,

I gave you access to the relevant course (as a student/user, is that sufficient?).

I will now also send you the e-mail with the video.

Have a nice day!

Many greetings,

Ralf

 

BV52's picture

Hi Ralf,

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:

OS: Mac OS 10.12.6

Browsers:

Chrome: Version 71.0.3578.98 (Official Build) (64-bit)

Safari: Version 12.0.2 (12606.3.4.1.4)

Firefox: Version 64.0.2 (64-bit)

-BV52

Hi BV,

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?

Many greetings,

Ralf

Hi BV, may I ask, if you had the opportunity to check the flickering on a mobile device? That would be great.

Kind regards,

Ralf

Hi Ralf 

I have the same issue, this is only on mobile devices though. 

thanks 
Rachel 

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?

// H5P iframe Resizer
(function () {
  var iOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
  if (!window.postMessage || !window.addEventListener || window.h5pResizerInitialized || iOS) {
    return; // Not supported
  }
BV52's picture

Hi All,

Thank you for reporting this and thank you for the suggestions. I filed a bug report and you can follow the progress here.

-BV52

I've seen a couple scripts that disable frame resizing on iOS. Will a fix be implemented soon?

See also https://github.com/h5p/h5p-moodle-plugin/issues/237 and https://h5ptechnology.atlassian.net/browse/HFP-2469

BV52's picture

Hi snafuy,

Thank ypu for the information. I did not see that bug report when I was filing this. Anyway the issue os set to high priority and will be worked on as soon as possible.

-BV52

Hi BV52,

is there any updates yet regarding this issue? I'm experiencing the same issue with Interactive Video & H5P-Quiz, on iPhone/iPad and Firefox on Android.

Hi BV52,

is there any update regarding this? I'm experiencing the same issue with Interactive Video & H5P-Quiz, on iPad/iPhone and Firefox on Android.

Hi guys,

we are also facing this flickering issue on Ipad 2 IOS 9 and Iphone 5 IOS 10. It happens inside a lesson where some H5P content is embedded.

On gihub there is a fix (https://github.com/h5p/h5p-moodle-plugin/issues/237) that doesn't work for us (Moodle 3.6) or we are simply not smart enough to put the code into the right place :-)

Tried every option from header down to after body closed.

Any help is higly appreciated.

Best regards from Hamburg,

Stefan

BV52's picture

Hi All,

I wish I had good news but currently there isn't a fix yet.

-BV52

Good morning everybody,

just a short update on my findings:

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.

Hope this info helps to get any further.

Keep up the good work - I love H5P!

Cheers,

Stefan

BV52's picture

Hi Stefan,

Thank you for the information.

-BV52

Hi,

thank you for this hint, installing the filter plus putting it in first place in the Moodle admin menue seems to have fixed the problem for me!

Cheers,
Michael

Hi everybody.

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).

No flickering on moodle 3.3 with basic boost theme

Flickering on moodle 3.6 with modified boost theme.

Can anybody shed some more light on it?

Cheers,

Stefan