On a test version of a live site with Beta 8, when clicking the menu button to show the off canvas / mobile menu / navigation the browser scroll bar is hidden and then the off canvas area appears. This creates some weird shifts on the page which are a bit disconcerting.
This is happening in both Firefox and Chrome. I haven’t checked other browsers.
On my live site which uses Pro 3 this does not happen.
Hey @urchindesign, I’m curious if you might have “scrollbars always on” enabled in your OS?
We made an adjustment this cycle to prevent content underneath the modal from scrolling. So when the modal is open, scrolling up/down doesn’t change your position on the page. This is probably why you’re seeing the scrollbar pop in and out. I can definitely see how that isn’t desirable. We’ll see if there are any alternatives that solve both concerns.
I am running Windows 10 Pro so if it is on by default then it would be. I have not specifically enabled anything like that.
Ok thanks! I know in OS X you have some more granular options that show scrollbars even when something hasn’t been moved.
@urchindesign, this was a fix we added based on feedback from somebody else who wanted us to kill body scroll when a modal / off canvas area was opened. We have now turned this into a setting on modals / off canvas areas where you can allow or disable body scroll when one of these is open. By default it will behave as it always has before. The scrollbar disappearing has to do with the only way we can kill this, which is by forcing overflow: hidden; on the :root, and in operating systems that have floating scrollbars this isn’t an issue, but it can certainly be jarring on ones where they are always present. So with this as a setting now, users can look at their own metrics and decide for themselves how they want these Elements to function.
Thanks!