Neither location mentions what should I think be by far the main purpose of scrollbar-gutter: avoiding layout shift when you open a modal and disable the page’s scrollbar to avoid confusion.

Perhaps the best solution there would be some way of designating a certain scrollable area as the document scrollable area when the body element doesn’t have scrollbars, so that Up/Down/PageUp/PageDown/Space/Shift+Space all act as though it were focused when the body is focused. That way, you could have the modal exist in the DOM after the main scrolling area, rather than inside it, and you wouldn’t need to worry about document scrollbars or overscroll behaviour. Multi-pane views (very common in desktop apps) are normally a bit of a mess on the web, and it’s always a pain when you come across a web page that has shunned the body scrollable area and put everything in something like a <main style="overflow:auto">, so that you have to focus that before keyboard scrolling works.

I should finish my draft blog post from a year or two ago where I explored the space and all the hoops you have to jump through to have it work almost perfectly, though it still requires some client-side JavaScript to redirect body focus to the correct element.

> Neither location mentions what should I think be by far the main purpose of scrollbar-gutter: avoiding layout shift when you open a modal and disable the page’s scrollbar to avoid confusion.

This can already be avoided by layering things right and not removing the scrollbar.

If you don’t remove the scrollbar, then the document can be scrolled underneath the modal. You can, these days, significantly mitigate this with overscroll-behavior on the modal backdrop, but the document scrollbar itself still works. (I will note, however, that overscroll-behavior is still missing on Safari. And scrollbar-gutter isn’t on Safari and is still disabled by default on Firefox.)

I think in a lot of cases, allowing the content below a modal to scroll is okay. If the user wants to scroll the content beneath a modal... so be it

scrollbar-gutter is new to me as well, and something I really want to use... but CanIUse claims it only has 66% support: https://caniuse.com/mdn-css_properties_scrollbar-gutter

And that is fine.

Expecting your website to be identitical across every browser is not the goal. You need to build sites that respond to the capabilities of the user's device, and progressively enhance to get better as more features become available. If the website is less wide to account for the scrollbar on browsers where it can be that's awesome, and if it's full width on browsers that don't have the gutter feature that's OK too.

Critical functionality should work everywhere. Then users should get the best experience possible that their browser supports on top of that.

Good point, but in my case this caused a horizontal scroll bar to also appear, which looked awful, so I guess it was critical functionality to me and not just an enhancement :)

I’m having trouble clicking the “need a website?” link on ooer.com on iPhone 7.

Should I record a video about the issue?

There is no critical functionality on my website. :)

I didn’t try making a point, it was just a genuine feedback.

Thank you. But seriously, my website only gets updated when I'm looking for a job. The rest of the time it just sits there gathering dust.

It is a fairly new property so it may be a while before it is ubiquitous (the MDN page links to a ticket for implementing it is Firefox where it is not yet present at all, for instance).

As it is a property to reduce visual artifacts (as content length changes) it is a safe one to specify and have ignored where not supported: users of other browsers will just not get that minor benefit until the browser catches up. This may be a problem if you are trying to achieve perfectly identical presentation to all users, but you've got a lot of problems coming your way too if that is one of your goals!

A browser not supporting this property of you user it is not going to break a design, not to the point of causing functionality or usability issues, unless you are doing something very strange and complex.

Me too, that's why I always have `html { overflow-y: scroll; }`.