search

GoogleChrome / dialog-polyfill

Polyfill for the HTML dialog element
BSD 3-Clause "New" or "Revised" License
2.45k stars 245 forks source link

Prevent page scrolling while modal dialog is open #226

Closed strarsis closed 1 year ago

strarsis commented 3 years ago

When the dialog is open, notably in modal mode, it is possible to still scroll the page behind of the dialog. The new and now fairly well supported overscroll-behavior CSS property could be applied to the dialog element in order to prevent scrolling of the page when the inside of the dialog is scrolled (overscroll-behavior: contain).

However, it doesn't seem to work with the dialog element, scrolling inside the dialog will still scroll the page.

jonathandewitt-dev commented 1 year ago

In browsers where both the <dialog> element and the overscroll-behavior property are supported, does this issue occur without the usage of this package? If so, it would seem you've discovered a browser issue, which may not be an issue with this package.

strarsis commented 1 year ago

@jonathandewitt-dev: Yes, the same issue can be observed with native <dialog> support and functioning overscroll-behavior (Google Chrome).

Can you reproduce this with this minimal test case?: https://codepen.io/strarsis/pen/RwBBWQz This would mean this is indeed a browser bug.

strarsis commented 1 year ago

@jonathandewitt-dev: Edit 2: After some further testing I notice that overscroll-behavior: contain only prevents scrolling in parent when the child element has something to scroll. When the child element has nothing to scroll, the parent element will be scrolled instead.

Non-scrollable child (bug occurs): https://codepen.io/strarsis/pen/RwBBWQz Scrollable child (bug does not occur): https://codepen.io/strarsis/pen/qByLKLe