Flickering after embedding H5P in Moodle

Submitted by ralfontherunNLGS on Sat, 01/05/2019 - 14:16
Forums: 
Bugs in content types

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

BV52

Mon, 01/07/2019 - 08:30

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

ralfontherunNLGS

Mon, 01/07/2019 - 08:53

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

BV52

Tue, 01/08/2019 - 07:50

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

ralfontherunNLGS

Tue, 01/08/2019 - 16:39

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

BV52

Wed, 01/09/2019 - 03:18

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

ralfontherunNLGS

Wed, 01/09/2019 - 07:51

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

BV52

Thu, 01/10/2019 - 02:49

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

ralfontherunNLGS

Thu, 01/10/2019 - 22:04

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

ralfontherunNLGS

Sat, 01/19/2019 - 12:29

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

Rachel Wigston

Thu, 01/10/2019 - 10:05

Hi Ralf 

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

thanks 
Rachel 

k_k

Sun, 01/20/2019 - 15:49

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

BV52

Mon, 01/21/2019 - 09:26

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

snafuy

Wed, 01/23/2019 - 19:53

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

BV52

Thu, 01/24/2019 - 07:01

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

haynaku86

Sat, 02/02/2019 - 11:33

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.

haynaku86

Sat, 02/02/2019 - 11:34

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.

rossiro

Sun, 02/03/2019 - 19:37

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

BV52

Mon, 02/04/2019 - 04:34

Hi All,

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

-BV52

rossiro

Mon, 02/04/2019 - 06:00

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

BV52

Tue, 02/05/2019 - 04:39

Hi Stefan,

Thank you for the information.

-BV52

haynaku86

Tue, 02/05/2019 - 17:10

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

rossiro

Mon, 02/11/2019 - 17:25

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

LauDai

Wed, 02/27/2019 - 08:48

Hi, we have the same problem of H5p iframe flickering only with mobile (iphone), with moodle 3.5 + Fordson theme, even with the h5p filter installed.

totgun

Wed, 02/27/2019 - 11:59

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.

BV52's picture

BV52

Thu, 02/28/2019 - 04:48

Hi Everyone,

I'm afraid there is no ETR yet for this issue but rest assured the core team is on top of this.

-BV52

peterward

Tue, 03/12/2019 - 16:27

Hi BV52,

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?

Cheers

Peter

 

BV52's picture

BV52

Wed, 03/13/2019 - 04:14

Hi Peter,

Thank you for offering help. There is a note on github that there is a fix and will be included in the next release. As for the timeline I cannot say when.

-BV52

rossiro

Wed, 02/27/2019 - 10:48

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.

Hope this info helps a bit.

Best regards,

Stefan 

MartinSandberg's picture

MartinSandberg

Mon, 03/04/2019 - 09:22

We have found this issue when using HVP in Totara.
The problem lies with how iPhone handles responive content within a responsive iFrame different than everyone else.

By making a small change in 

library/styles/h5p.css

the problem disappeared.

html.h5p-iframe, html.h5p-iframe > body {

font-family: Sans-Serif; /* Use the browser's default sans-serif font. (Since Heletica doesn't look nice on Windows, and Arial on OS X.) */

width: 1px;

min-width: 100%;

/*width: 100%; height: 100%;*/

margin: 0;

padding: 0;

}
MartinSandberg's picture

MartinSandberg

Mon, 03/04/2019 - 09:34

Wrote a comment earlier about how we solved this problem at Xtractor AB but it seems to have disappeared.

The issue has to do with iPhones and also Safari on Mac hadles responsive content in a responsive iFrame differently from everyone else.

So to fix this we removed the width 100% and height 100% from:

library/styles/h5p.css

Instead we use:

width:1px;
min-width: 100%;

This works well on iPhones, Androids and all browsers we have tested it on.

peterward

Tue, 03/12/2019 - 16:20

Hi Guys,

Our h5p activities are embedded in moodles lesson activity. Having applied Martins fix we tested each activity type we are using in the moodle. Here's the results.

Moodle version: Moodle 3.4.7 (Build: 20190114)

H5P Plugin version: 1.15 2019022000

 

 

 

Activity Name /Lesson Page Name

iPad (Mini) Version 9.3.5

Test Result

iPhone (6) Version 12.1.2

Test Result

Activity 1 – Multiple Choice

X No flickering, but screen jumps when tapped to select answer.

X High volume screen flickering

Activity 2- Flashcards

√

√

Activity 3- Select, Drag and Drop

√

X High volume screen flickering

Activity 4- Highlight the Word

√

√

Activity 5- Accordion

√

X High volume screen flickering

Activity 6- True or False

√

X High volume screen flickering

Activity 7- Fill in the Blanks

√

√

 

 

 

MartinSandberg's picture

MartinSandberg

Thu, 03/14/2019 - 14:03

Found out today that with that small CSS tweak 360 fullscreen does not show, at all.

Working on finding a fix for that.... but it looks to me like the CSS needs to be looked at thoroughly


MartinSandberg's picture

MartinSandberg

Thu, 03/14/2019 - 15:03

I added this to the library\styles\hvp.css file to get fullscreen to work with my previous flickering fix:

html.h5p-fullscreen, html.h5p-iframe, html.h5p-iframe > body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}

rossiro

Thu, 03/14/2019 - 16:06

Unfortunately I can confirm this. We still have the flickering issue and since the last update also the strong reduction of the fullscreen view.

By the way the announced capability of showing content in the Moodle App doesn't work for us.

Latest H5P plugin and Moodle 3.6 with a modified Boost Theme.

Regards from Hamburg,

Stefan

jgalvez

Mon, 03/18/2019 - 12:54

I'm having issues with this same script in Moodle 3.4.4.

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.

MartinSandberg's picture

MartinSandberg

Thu, 03/21/2019 - 15:26

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 solved
To me it's a workaround not a solution

The fix I.m talking about is here:
https://github.com/h5p/h5p-php-library/commit/1a09b1a30e61fc9f6454f1e79a...

It does not adress the problem with the CSS but uses JavaScript to circumvent it.

I added my "fix" in a comment in git as well

I would like for you to test this out and make any additional changes that are needed within CSS

Best regards,

Martin Sandberg
Xtractor AB

BV52's picture

BV52

Wed, 03/27/2019 - 02:11

Hi All,

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.

-BV52

lengyelke

Thu, 04/04/2019 - 10:18

Hi All,

on our Moodle site we put the embedded H5P into a well, so it is kind of easy to identify where they are.

the HTML code looks something like this:

<div class="h5pwell" style="user-select: auto;">
    <iframe src="https://*****uk/mod/hvp/embed.php?id=83897" width="1341" height="303" frameborder="0" allowfullscreen="allowfullscreen" style="user-select: auto;"></iframe>
    <script src="https://*****uk/mod/hvp/library/js/h5p-resizer.js" charset="UTF-8" style="user-select: auto;"></script>
</div>

I was able to stop the flickering adding the following JQuery code to the

Dashboard / ► Site administration / ► Appearance / ► Additional HTML

additionalhtmlhead section, where we have other scripts as well.

<!-- our own script -->
<script type="text/javascript">
$(document).ready(function(){
...

<!-- This is to remove the h5p flicker for iOS mobile devices -->
$('.h5pwell > iframe').on("load", function() {
    var frameHeight = $(this).contents().find('iframe.h5p-iframe').css('height');
    $(this).css('min-height',frameHeight);
    $(this).css('height',frameHeight);
});

...
});
</script> 

It might be helpful.

Thanks

Ferenc

BV52's picture

BV52

Fri, 04/05/2019 - 07:13

Hi Ferenc,

Thank you for the suggestion.

-BV52

MartinSandberg's picture

MartinSandberg

Tue, 04/16/2019 - 08:37

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.


--------------------------------
library/styles/h5p.css ~row 17 in html.h5p-iframe, html.h5p-iframe > body {
--------------------------------
/* xtractor change to stop iphones from flickering */
width: 1px;
min-width: 100%;
/*width: 100%;
height: 100%;*/
/* end xtractor */

--------------------------------
library/styles/h5p.css ~row 27 after html.h5p-iframe, html.h5p-iframe > body {
--------------------------------
/* XTRACTOR addition as the change above stopped fullscreen from working*/
html.h5p-iframe, html.h5p-iframe > body.h5p-fullscreen {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
/* end XTRACTOR */

 

Sean Norrey

Mon, 08/31/2020 - 06:07

Hi, 
We just did some quick testing and found it was flickering at 1920 x 1080. We then tried some other resolutions where we saw the flickering and others where there was no flickering. I believe the problematic resolutions were 16:9. Perhaps the maths in the javascript/css for 16:9 resolution is wrong?

Just a thought.