Vuetify: [Bug Report] Page scrollbar should be hidden on fullscreen dialogs

[sindrepm]

Versions and Environment

Vuetify: 1.1.0-beta.0
Vue: 2.5.16
Browsers: Chrome 66.0.3359.181
OS: Windows 7

Steps to reproduce

Create a fullscreen dialog with content that exceeds the viewport.

Expected Behavior

Only one scrollbar should be visible (the one in the dialog), and the underlying page scrollbar should be hidden.

Actual Behavior

Both scrollbars are visible resulting in bad UX. Also, even if the dialog content does not require scrolling, the page scrollbar is still visible which is confusing as fullscreen dialogs cover the viewport anyway.

Reproduction Link

https://codepen.io/anon/pen/YvKxzg

Other comments

Suggested solution:
When opening a fullscreen dialog, set overflow: hidden on the html element.

[jonataswalker]

Wouldn't be on the body element?

[sindrepm]

@jonataswalker No, the CSS reset explicitly sets overflow-y: scroll on the html element.

[johnleider]

I have plans for our css reset for 1.2 (didn't make it to 1.1 because I was moving). This will be included in those changes/updates.

[hymair]

Same as #3101

[KaelWD]

Duplicate of #3101

[jsantanders]

Hi there, exist a workaround?

[basebandit]

This is how you disable overflow on the html element when dialog opens.
watch: { dialog: function (val) { document.querySelector('html').style.overflow = val ? 'hidden' : null } }