The ModalDialog is expected to display in the centre of the viewport when open. In Firefox, this works fine: the modal is displayed overlaid over the centre of the page and the page is scrolled into view so the modal is in the centre of the viewport:
However, in Chromium, it displays in the centre of the page, but it does not scroll into view. So if you are on a long page (eg. a unit with several components), and currently at the top or bottom of the page, the Modal appears off-screen, resulting in an unfriendly darkened page:
The modal is visible if you manually scroll up, but this is not great UX.
To reproduce
- create a unit with several components
- for the first or last component, ensure it is one that lets you trigger a ModalDialog (not sure what else uses this; we're adding them to https://github.com/open-craft/xblock-ai-evaluation currently, which is a work in progress)
- publish and view as a learner in Firefox
- scroll up or down to the component, and trigger the modal
- verify that the modal displays in the centre of the viewport
- open the same page in Chromium and repeat triggering the modal
- verify that the modal displays out of the viewport
Paragon version: @openedx/paragon@23.21.2
The ModalDialog is expected to display in the centre of the viewport when open. In Firefox, this works fine: the modal is displayed overlaid over the centre of the page and the page is scrolled into view so the modal is in the centre of the viewport:
However, in Chromium, it displays in the centre of the page, but it does not scroll into view. So if you are on a long page (eg. a unit with several components), and currently at the top or bottom of the page, the Modal appears off-screen, resulting in an unfriendly darkened page:
The modal is visible if you manually scroll up, but this is not great UX.
To reproduce
Paragon version:
@openedx/paragon@23.21.2