Some browser configurations and OS settings result in a fixed (not overlayed) scroll-bar when content overflows, that disappears when content is not scrollable. When content grows beyond the viewport and a scrollbar appears we currently see layout shifts across the viewport.
In most browsers (all major but safari), the scrollbar-gutter property can be used to enhance the experience when the scrollbar appears, as space is already reserved for it, and no layout shift should happen.
Describe the solution you'd like
We should utilise the scrollbar-gutter CSS property, that:
reserve space for the scrollbar, preventing unwanted layout changes as the content grows while also avoiding unnecessary visuals when scrolling isn't needed. (MDN)
Have you considered any alternatives?
On a technical level, an alternative is setting overflow-y: scroll to just always show a scrollbar-track, but with scrollbar-gutter the track should properly appear and be removed together with the scrollbar, which should give a cleaner look and feel.
Are there any additional context?
Checklist:
The following tasks should be carried out in sequence in order to follow the process of contributing correctly.
Describe the enhancement
Some browser configurations and OS settings result in a fixed (not overlayed) scroll-bar when content overflows, that disappears when content is not scrollable. When content grows beyond the viewport and a scrollbar appears we currently see layout shifts across the viewport.
In most browsers (all major but safari), the scrollbar-gutter property can be used to enhance the experience when the scrollbar appears, as space is already reserved for it, and no layout shift should happen.
Describe the solution you'd like
We should utilise the scrollbar-gutter CSS property, that:
Have you considered any alternatives?
On a technical level, an alternative is setting
overflow-y: scrollto just always show a scrollbar-track, but with scrollbar-gutter the track should properly appear and be removed together with the scrollbar, which should give a cleaner look and feel.Are there any additional context?
Checklist:
The following tasks should be carried out in sequence in order to follow the process of contributing correctly.
Refinement
Implementation
The contributor who wants to implement this issue should:
Review
Once the issue has been implemented and is ready for review: