When clicking outside of Modal on mobile devices to close it, the web page is then automatically scrolled to the top. This does not happen on Desktop/Laptop screens

[gbizkit]

Bug Description

When clicking outside of Modal on mobile devices to close it, the web page is then automatically scrolled to the top. This does not happen on Desktop/Laptop screens. The desired behavior should be the same on Desktop, Laptop and mobile, regardless of screen/viewport size. The desired behavior is what happens on Desktop. The behavior witnessed on Mobile is not desired.

Steps To Reproduce

1. Create a section.
2. Create a div within that section.
3. Within that div, add a button.
4. Add a Modal within that div.
5. Configure the Modal to open when the button is clicked on.
6. Within the Modal, add a Video.
7. Save/publish changes

( in this demo I added the following iframe code )

( <iframe width="560" height="315" src="https://www.youtube.com/embed/rhKSFBIggGs?si=wWyUGHnjWSwF8ZOB&rel=0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe> )

8. Go to web frontend on Desktop screen, clicking on the button will launch the Modal Video as desired and clicking anywhere outside of the modal will close the Modal as desired. The web page stays in the exact same location as the user was when they clicked on the button. No automatic scrolling to the top takes place.

9. Go to web frontend on Mobile screen, clicking on the button will launch the Modal Video as desired and clicking anywhere outside of the modal will close the Modal as desired. However upon closure, the web page is scrolled to the top and not left at the same location the user was at when clicking on button to trigger the modal. This behavior is not wanted and should not happen.

Sandbox site URL = https://oxygen-q545wgqkcsryl.oxygen-demo.qsandbox.org/home

On the sand box site above, there is a section for this Modal called "Modal Section Test". Just a simple section, with a div containing a heading, a button and a modal containing a youtube video using the iframe mentioned above.

[KittenCodes]

Reported internally via https://github.com/soflyy/oxygen/issues/5374

[gbizkit]

Just to add to this as well, this bug is only present when using the "click on background to close" option. When/if you choose to disable that option and add a close button instead, then the issue is not present and both desktop and mobile work as expected and don't scroll to the top of the page when the modal is closed.

[maltmann-muc]

This is the built-in "document scroll prevention on open modal".
You can solve that with a simple CSS rule:

body.oxy-modal-active {
position: initial;
overflow-y: initial;
height: initial;
}

Of course, I would appreciate if Oxygen did not prevent scrolling in the first place, or at least make it optional with modals.