Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Activities created in Moodle flickering on iPad #237

Open
sarahjcotton opened this issue Dec 12, 2018 · 19 comments

Comments

Projects
None yet
10 participants
@sarahjcotton
Copy link

commented Dec 12, 2018

When an activity that has been built in Moodle is displayed on an iPad it flickers on screen rendering it unusable. This is apparent in both Safari and Chrome. I've managed to get a video of this happening although it's not very good quality I'm afraid. This is using clean theme in 3.5.1 with version 2018113000 of H5P. Activities built on the H5P site and then embedded do not have the same issue.
https://solent.cloud.panopto.eu/Panopto/Pages/Viewer.aspx?id=75df7efa-08b2-4784-921f-a9b4010f1cab

@thomasmars

This comment has been minimized.

Copy link
Member

commented Dec 13, 2018

Thanks for reporting this.
Can you give us some more info please ?

  1. Was this happening before version 2018113000 ?
  2. How is this content being displayed ? Is it embedded on a course page from an activity within the same course ?
  3. What iPad device, OS version and browser versions is this happening in ?
  4. How exactly can we reproduce this ? Is this happening every time you view the H5P, or only under certain circumstances ?
  5. Which H5P content type is being used, and which version of the H5P content type ? Does this happen when using other H5P content types ?
  6. Are there any browser console errors ?
@sarahjcotton

This comment has been minimized.

Copy link
Author

commented Dec 13, 2018

Hi Thomas.

Sure, please find the details below:

  1. No
  2. This is an activity embedded in a label, from the same course and also within the same section.
  3. iPad Pro (A1673), iOS 12.1.1, Safari 12 and also iPhone 6S, iOS 12.1.1, Safari 12.
  4. Copy the embed code from an existing activity and add it to label in the same page.
  5. This happens for Hotspot, Agamotto and Mulitple Choice (Joubel) H5P activities embedded within a label in Moodle; we haven't tested any others. I don't know how to find the version but they are all up to date.
  6. I don't know how to find this out on an iPad

The activities display fine on an Android phone, it just seems to be iOS that's playing up.
Agamotto does work on a Mac on Safari now, which it didn't previously.

@thomasmars

This comment has been minimized.

Copy link
Member

commented Dec 14, 2018

Thank you for the details. I have created an issue for this in our public issue tracker, and will try to push it through as soon as possible: https://h5ptechnology.atlassian.net/browse/HFP-2469.

@Jarvil

This comment has been minimized.

Copy link
Contributor

commented Jan 4, 2019

Hello,

I'm experiencing flickering in with iFrame embedded H5P-material in Moodle with IOS 12.1.1/Safari any progress on this?

The flickering is present in iOS with Chrome-browser also.

The flickering is so bad I think it could cause seizures.

@Jarvil

This comment has been minimized.

Copy link
Contributor

commented Jan 14, 2019

any progress @thomasmars

@evsadmin

This comment has been minimized.

Copy link

commented Jan 20, 2019

Hello,

I am experiencing the same problem. I am using gnomio.com. I am not sure of which version of moodle they use.

@troywilliams

This comment has been minimized.

Copy link

commented Jan 22, 2019

Hi,

We are having the same problem with Safari and Firefox on iOS.

Thanks

@digitalskill

This comment has been minimized.

Copy link

commented Jan 22, 2019

Hi guys - This script resolves when added into additional HTML. It's not ideal - but does the trick for us right now.

It seems to point that the current embedded script for H5P may need to set a min-height when doing measurements of internal content

<script> // This is to remove the mobile flicker for mobile devices window.addEventListener("load", function () { window.setInterval(function(){ var iframes = jQuery('body.mobiletheme:not(.h5p-no-frame) iframe[src*="hvp"]'); jQuery(iframes).each(function(i,obj){ jQuery(obj).contents().find('body').css('overflow','hidden'); var frameHeight = jQuery(obj).contents().find('iframe.h5p-iframe').css('height'); jQuery(obj).css('height',frameHeight); jQuery(obj).css('min-height',frameHeight); }); }, 5); }); </script>
@sarahjcotton

This comment has been minimized.

Copy link
Author

commented Jan 23, 2019

Hi guys - This script resolves when added into additional HTML. It's not ideal - but does the trick for us right now.

It seems to point that the current embedded script for H5P may need to set a min-height when doing measurements of internal content

<script> // This is to remove the mobile flicker for mobile devices window.addEventListener("load", function () { window.setInterval(function(){ var iframes = jQuery('body.mobiletheme:not(.h5p-no-frame) iframe[src*="hvp"]'); jQuery(iframes).each(function(i,obj){ jQuery(obj).contents().find('body').css('overflow','hidden'); var frameHeight = jQuery(obj).contents().find('iframe.h5p-iframe').css('height'); jQuery(obj).css('height',frameHeight); jQuery(obj).css('min-height',frameHeight); }); }, 5); }); </script>

This is great, thank you... we only have this version on our dev server at the moment but this fix might enable me to push it onto production if I add it to the plugin. We needed to upgrade to fix other issues but this one is worse than the ones we already have, so we've had to stop pushing the use H5P for the time being unfortunately .

@snafuy

This comment has been minimized.

@mic-en

This comment has been minimized.

Copy link

commented Feb 2, 2019

Hi @digitalskill thanks for providing this script, looks really helpful! where exactly do you add it to resolve the issue? it doesn't seem to work for me so far.

@kaitkrull

This comment has been minimized.

Copy link

commented Feb 5, 2019

Hi! Just wanted to point to this https://h5p.org/comment/25177#comment-25177. Maybe it could help. What do you think about addressing iOS only and changing the H5P's library/js/h5p-resizer.js script to do not nothing when iOS is detected (so just to return)? Maybe there is still a better implementation to this.
I have not tested this directly in Moodle H5P plugin but can confirm that after doing a change in Wordpress H5P module and embedding from there to Moodle the flickering on iOS stopped. I think if this is an appropriate fix then this should be implemented to the core H5P resize script also.
I also tried embedding H5P in Moodle without the resize script and it worked for iOS but messed up on other devices like Android and desktop which cannot handle the iframe size. So this has to be something to do with iOS handling iframe itself (can somebody confirm or explain what is so different on iOS?)

@Jarvil

This comment has been minimized.

Copy link
Contributor

commented Feb 7, 2019

@thomasmars @icc @fnoks any progress on fixing this? This makes Moodle with embedded H5P-activities virtually unusable.

@sarahjcotton

This comment has been minimized.

Copy link
Author

commented Mar 6, 2019

@thomasmars @icc @fnoks any progress on fixing this? This makes Moodle with embedded H5P-activities virtually unusable.

I would also like to know if any progress has been made. Colleagues are regularly asking when the fix will be available as they would like to recommence using the module.

thomasmars added a commit to h5p/h5p-php-library that referenced this issue Mar 7, 2019

@thomasmars

This comment has been minimized.

Copy link
Member

commented Mar 7, 2019

This was fixed in h5p/h5p-php-library@1a09b1a.
It will be part of the upcoming release.
Big thanks to everyone who participated.

@thomasmars thomasmars closed this Mar 7, 2019

@sarahjcotton

This comment has been minimized.

Copy link
Author

commented Mar 19, 2019

We have been testing the patch ahead of the release and there are now large areas of white space appearing below some of the activity types. We have not tested all of them but the Arithmetic Quiz and Guess the Answer types are ok. The Image Juxtaposition, Document Tool and Hot Spot however, all have white space which pushes the rest of the content down the page. This is using Safari on an iPad. I've attached an image showing an example.
h5p

Edit: Currently testing v.2019031301 where the issue persists. Thanks for reopening.

@thomasmars thomasmars reopened this Mar 19, 2019

@thomasmars

This comment has been minimized.

Copy link
Member

commented Mar 19, 2019

Thanks for reporting this, I've created an issue for handling it at https://h5ptechnology.atlassian.net/browse/HFP-2690 where you can follow along the progress.

@MartinSandberg

This comment has been minimized.

Copy link

commented Mar 21, 2019

I will leave a comment here as well....

added the info here (h5p/h5p-php-library@1a09b1a) previously but mayby more people will see it here;

The flickering problem is caused by Safari on iPhone / iPad / Mac handling responsive content in a responsive iframe differently from eveyone else. At Xtractor we solved the flickering issue by making some small tweaks to the library/styles/hvp.css file.


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-fullscreen, html.h5p-iframe, html.h5p-iframe > body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
/* end XTRACTOR */

@Jarvil

This comment has been minimized.

Copy link
Contributor

commented May 8, 2019

Hello,

Has this newest fix been implemented also?

https://h5p.org/comment/27190#comment-27190

it seems that this Jira-ticket:

https://h5ptechnology.atlassian.net/browse/HFP-2469

have been closed before that comment. @thomasmars

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.