H5P iframe height flickering / scrollbar flashing due to dynamic resize (Edge, Interactive Book)

[TakedownDeluxe]

Description

When using H5P content embedded in Moodle (especially Interactive Book), the iframe height continuously toggles between two pixel values (e.g. 799px ↔ 800px).
This causes a scrollbar to appear and disappear repeatedly, resulting in visible flickering / jittering of the content.
The issue occurs even without any custom CSS and seems to be caused by the dynamic iframe resize logic.

Environment

• Browser: Microsoft Edge (Chromium-based)
• Platform: Moodle (H5P plugin)
• Content type: H5P Interactive Book
• OS: Windows
• Custom CSS: none (issue persists after removing all custom CSS)

Observed behavior

• H5P iframe receives inline height updates via JavaScript
• Height jumps between two values (e.g. 799px ↔ 800px)
• Each jump triggers the browser to add/remove a vertical scrollbar
• This leads to visible flickering and unstable layout

Problem is especially noticeable: on smaller or responsive viewport widths

Expected behavior

• iframe height should stabilize
• No continuous resizing when content height does not actually change
• No scrollbar flashing when content fits

Technical notes / suspicion

• Likely caused by subpixel rounding differences when calculating height
• Example scenario: calculated height ≈ 799.5px
• rounded up/down alternately
• Resizer logic appears to continuously postMessage updated heights to the parent
• Inline styles (style="height: 800px") override any CSS-based mitigation

Steps to reproduce

• Open a Moodle course containing an H5P Interactive Book
• Use Microsoft Edge
• Reload the page with a medium/small viewport width
• Observe iframe height and scrollbar behavior
• Height oscillates between two values, scrollbar appears/disappears

Suggested fix

Add a pixel tolerance / debounce to the resize logic

Prevent height updates if the difference is below a defined threshold (e.g. ±1px)

Avoid continuous resize messages when content height is effectively stable

Additional info

This appears to be a resizer logic issue, not a theming or CSS problem.

[icc]

The inner and outer frame resize logic need to be aware of each other, if not the best way to avoid this is a 50px blank padding at the bottom of the h5p content frame.