document.body.clientWidth changes when opening the drawer on Windows

[gronke]

Description

Content size changes when opening the drawer on Windows.

Expected outcome

The window content size does not change when activating the drawer.

Actual outcome

The scroll-bar disappears when activating the drawer which causes an update of document.body.clientWidth.

Demo

This example shows the effect on a Windows 10 with Chrome 54.0.2840.71

Steps to reproduce

1. Open https://polymerelements.github.io/app-layout/ in a Windows 10 Chrome
2. Click the menu icon to activate the drawer menu in the smartphone preview

Browsers Affected

Tested on Windows 10

• [x] Chrome
• [x] Firefox
• [ ] Safari 9
• [ ] Safari 8
• [ ] Safari 7
• [x] Edge
• [x] IE 11
• [ ] IE 10

[keanulee]

Note that this is because we disable scrolling when the drawer is opened, so if there's a scrollbar, it is removed from the view and the viewport will resize.

[blasten]

@keanulee is this a wontfix?

[gronke]

I did not have time yet to come up with a solution. Wanted to spike on locking the body scroll position from script rather than CSS to leave the Scrollbar enabled while showing the overlay. Is it worth to create a PR with that solution?

[keanulee]

One option is to make the disable-scrolling feature optional, which would keep the scrollbar when the drawer is opened. However, being able to scroll the content below would not be a good UX.