search

googlearchive / paper-dialog

A dialog à la Material Design
19 stars 16 forks source link

Page is still scrollable behind a paper-dialog #39

Open 0x24a537r9 opened 9 years ago

0x24a537r9 commented 9 years ago

Don't know if this is WAI, but currently it is possible on both the desktop and mobile versions to scroll the page behind the dialog while it is open. On desktop it's confusing but not really that big of a deal, since it only occurs when the user uses their mouse's scroll wheel.

On mobile, however, it's really bad since any vertical touch gesture is interpreted as scrolling the page (but strangely, not the dialog). What's worse is that when you scroll down in mobile Chrome, the URL bar disappears making the effective height of the viewport larger, but the dialog's backdrop takes a second to respond, so you have the awful situation where the backdrop doesn't cover the bottom 50px of the screen for about a second.

I would think allowing scrolling in the background would be very counter-intuitive and should thus be prevented, but at the very least the backdrop of the dialog should extend far beyond the edges of the viewport so that, if the viewport is suddenly resized, the backdrop still covers everything.

Mikanoshi commented 9 years ago

I use this temporary fix with jquery, it checks for backdrop presence.

$(document).bind('mousewheel DOMMouseScroll touchmove', function(event) {
    if ($('div.core-overlay-backdrop.core-opened').length > 0) event.preventDefault();
});

Works in desktop and mobile browsers (if you don't need to drag something else while dialog is opened). In Firefox Mobile I also have a bottom backdrop gap because of dynamic header and it never goes away.

rwestlund commented 8 years ago

This is a big issue for me as well. I have some dialogs with scrollable areas and paper-dropdown-menus, so I can't just disable all scrolling.

I'd love to have a disable-background-scroll attribute, implied by using modal.

jmendiola222 commented 7 years ago

+1