Skip to content
Permalink
Browse files

Fix flickering for embedded content on iPads

  • Loading branch information...
thomasmars committed Mar 7, 2019
1 parent 7b7b35e commit 1a09b1a30e61fc9f6454f1e79a0f8f35290413fd
Showing with 5 additions and 0 deletions.
  1. +5 −0 js/h5p.js
@@ -263,6 +263,11 @@ H5P.init = function (target) {
var parentHeight = iframe.parentElement.style.height;
iframe.parentElement.style.height = iframe.parentElement.clientHeight + 'px';

// Note: Force layout reflow
// This fixes a flickering bug for embedded content on iPads
// @see https://github.com/h5p/h5p-moodle-plugin/issues/237
iframe.getBoundingClientRect();

// Reset iframe height, in case content has shrinked.
iframe.style.height = '1px';

2 comments on commit 1a09b1a

@otacke

This comment has been minimized.

Copy link
Member

replied Mar 7, 2019

Feedback from the technical university in Lübeck who applied the patch: It seems to be working at first (on an iPad), but the flickering starts sooner or later.

@MartinSandberg

This comment has been minimized.

Copy link

replied Mar 15, 2019

The flickering problem is caused by Safari on iPhone / iPad / Mac handling responsive content in a responsive iframe different 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 */

Please sign in to comment.
You can’t perform that action at this time.