From d8d22cde3bdcae228f55cd65b057167a7cc91ea7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Emilio=20Cobos=20=C3=81lvarez?= Date: Fri, 4 Feb 2022 14:37:02 +0100 Subject: [PATCH] Fix CSS to avoid flickering on Firefox This fixes https://bugzilla.mozilla.org/show_bug.cgi?id=1750204 (see there for steps to reproduce and some analysis). I think this is a bug in the plugin, not in Firefox, and is triggered in Firefox mostly due to timing differences on how we fire resize and timers (the plugin triggers resizes off a setTimeout). I can get to trigger it in Chrome if I fiddle manually with the timers. Explanation is as follows: the resizing code reads clientHeight and scrollHeight, and it assumes it means "desired content height" and "max scroll height". The later is always right, the former is not because of this rule. If the first resize happens at a time the iframe is small (like 1px), this rule prevents the body to get the right desired size (clamping it to 1px in that example). This causes clientHeight to be wrong. If the timing is unfortunate, this can gets us into an infinite resize loop because of how the resize event listeners and timers are set up. Ensure the clientHeight doesn't depend on the current viewport size, and thus avoid the loops, by not clamping the html and body sizes. --- styles/h5p.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/styles/h5p.css b/styles/h5p.css index d50fa3e9..d5a15910 100644 --- a/styles/h5p.css +++ b/styles/h5p.css @@ -27,7 +27,7 @@ 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: 100%; - height: 100%; + min-height: 100%; margin: 0; padding: 0; }