-
Bug
-
Resolution: Unresolved
-
Minor
-
None
-
4.5.4, 5.0
Issue
When you go full screen, the backdrop for the drawers on the right attaches to the HTML root element. This means that whenever you click on any part of the site, it causes the drawers to close and focuses on the drawer open button. This is an issue preventing any page interactions when going full screen.
We are experiencing this issue on the production system. However, I started with a new installation of Moodle v4.5.4 locally to confirm that the problem is present. I am using the default Boost theme. PHP version 8.2. Locally running on apache.
Video of the issue: https://drive.google.com/file/d/1WzBm4D5uSbmvvkE4TJqhu1g8N0JdAUik/view?usp=sharing
Steps to reproduce
Start a fresh installation of Moodle version 4.5.4 locally. Keep the default Boost theme. Open the developer console and type
document.documentElement.requestFullscreen()
|
to go full screen. Then try clicking anywhere on the page. It will hide drawers on the right if not hidden and place focus on the drawers' open button. The modal backdrop is initialised and used subsequently on the same page until refresh. If you interact with the page first and then request the full page, the issue would not appear.
Note, going full screen with a hot key, for example,
F11
|
does not cause the issue, as the root HTML element is not set to the top layer (https://github.com/mdn/content/issues/13674)
Started investigating this issue as experiencing it with the Moodle plugin called 'Integrity Advocate'. Here is a related issue marked as 'Cannot reproduce' (https://tracker.moodle.org/browse/MDL-83507).
After some testing, realised that the issue is global to the Moodle website.
Made a temporary fix by updating attachment point logic for the Integrity Advocate (https://github.com/moodle/moodle/blob/MOODLE_405_STABLE/lib/amd/src/modal_backdrop.js#L68). Replaced with:
getAttachmentPoint() {
|
const el = Fullscreen.getElement(); |
if (el && el.tagName === 'HTML' && window.IntegrityAdvocate) { |
return $(this.attachmentPoint); // Don't attach to <html> |
}
|
return $(el || this.attachmentPoint); |
}
|
This fix only applies to the exams with Integrity Advocate. Please let me know if this can be fixed in the subsequent versions of Moodle globally.
- will help resolve
-
-
- Open
-
