Request for position: CSS scrollbar-gutter
Hi webkit-dev, This is a request for WebKit's position on the CSS "scrollbar-gutter" property. The spec status is Working Draft. This feature is already implemented in Chrome behind a flag. Spec: https://drafts.csswg.org/css-overflow-4/#scrollbar-gutter-property Explainer: https://github.com/felipeerias/scrollbar-gutter-explainer Existing WebKit bug: https://bugs.webkit.org/show_bug.cgi?id=167335 Summary: The scrollbar-gutter property provides control over the presence of scrollbar gutters (the space which may be reserved to display a scrollbar). This gives Web authors more agency over how their layouts interact with the scrollbars provided by the browser, so they can e.g. prevent excessive layout changes as content expands while avoiding unwanted visuals when scrolling isn't needed. Thanks! Best. Felipe
WebKit does not support this feature as specified. Our opinion is that we don't want to encourage web developers to reserve space for scrollbars in a way that prevents non-interactive content from intruding into that space. This undoes a big advantage of overlay scrollbars, in that they leave more space for content. Our preference would be some kind of margin value (perhaps a constant) that allows authors to move only interactive content outside of the area affected by overlay scrollbars. Simon
On Feb 23, 2021, at 5:54 AM, Felipe Erias via webkit-dev <webkit-dev@lists.webkit.org> wrote:
Hi webkit-dev,
This is a request for WebKit's position on the CSS "scrollbar-gutter" property. The spec status is Working Draft. This feature is already implemented in Chrome behind a flag.
Spec: https://drafts.csswg.org/css-overflow-4/#scrollbar-gutter-property
Explainer: https://github.com/felipeerias/scrollbar-gutter-explainer
Existing WebKit bug: https://bugs.webkit.org/show_bug.cgi?id=167335
Summary:
The scrollbar-gutter property provides control over the presence of scrollbar gutters (the space which may be reserved to display a scrollbar).
This gives Web authors more agency over how their layouts interact with the scrollbars provided by the browser, so they can e.g. prevent excessive layout changes as content expands while avoiding unwanted visuals when scrolling isn't needed.
Thanks!
Best. Felipe _______________________________________________ webkit-dev mailing list webkit-dev@lists.webkit.org https://lists.webkit.org/mailman/listinfo/webkit-dev
Just thinking out loud, but has an environment variable for scrollbar widths (maybe two, one for thin scrollbars, one for regular-width scrollbars) be enough to do the job here? I recall similar proposals in the CSSWG, but I'm not sure if they were discussed seriously. It seems it should be easier to implement, off-hand, and maybe less confusing? And it would allow the pattern Simon mentions here. It should also allow solving some of the issues people hit with vh/vw if non-overlay scrollbars are used[1]. I guess for that last use-case we'd really need two pairs of values, one of which should return zero for overlay scrollbars for that use-case to work...? Anyhow, seems like this could be discussed in the CSSWG. -- Emilio [1]: https://github.com/w3c/csswg-drafts/issues/6026 On 2/23/21 18:45, Simon Fraser via webkit-dev wrote:
WebKit does not support this feature as specified.
Our opinion is that we don't want to encourage web developers to reserve space for scrollbars in a way that prevents non-interactive content from intruding into that space. This undoes a big advantage of overlay scrollbars, in that they leave more space for content.
Our preference would be some kind of margin value (perhaps a constant) that allows authors to move only interactive content outside of the area affected by overlay scrollbars.
Simon
On Feb 23, 2021, at 5:54 AM, Felipe Erias via webkit-dev <webkit-dev@lists.webkit.org> wrote:
Hi webkit-dev,
This is a request for WebKit's position on the CSS "scrollbar-gutter" property. The spec status is Working Draft. This feature is already implemented in Chrome behind a flag.
Spec: https://drafts.csswg.org/css-overflow-4/#scrollbar-gutter-property
Explainer: https://github.com/felipeerias/scrollbar-gutter-explainer
Existing WebKit bug: https://bugs.webkit.org/show_bug.cgi?id=167335
Summary:
The scrollbar-gutter property provides control over the presence of scrollbar gutters (the space which may be reserved to display a scrollbar).
This gives Web authors more agency over how their layouts interact with the scrollbars provided by the browser, so they can e.g. prevent excessive layout changes as content expands while avoiding unwanted visuals when scrolling isn't needed.
Thanks!
Best. Felipe _______________________________________________ webkit-dev mailing list webkit-dev@lists.webkit.org https://lists.webkit.org/mailman/listinfo/webkit-dev
_______________________________________________ webkit-dev mailing list webkit-dev@lists.webkit.org https://lists.webkit.org/mailman/listinfo/webkit-dev
I guess that'd solve parts of the issue, but not the use-case of non-overlay scrollbars in overflow: auto causing reflow when the content initially overflows. But it seems like a much simpler version of scrollbar-gutter (one that would only work with non-overlay scrollbars, and on scrollable boxes) could solve. -- Emilio On 2/23/21 22:08, Emilio Cobos Álvarez via webkit-dev wrote:
Just thinking out loud, but has an environment variable for scrollbar widths (maybe two, one for thin scrollbars, one for regular-width scrollbars) be enough to do the job here?
I recall similar proposals in the CSSWG, but I'm not sure if they were discussed seriously. It seems it should be easier to implement, off-hand, and maybe less confusing? And it would allow the pattern Simon mentions here.
It should also allow solving some of the issues people hit with vh/vw if non-overlay scrollbars are used[1]. I guess for that last use-case we'd really need two pairs of values, one of which should return zero for overlay scrollbars for that use-case to work...? Anyhow, seems like this could be discussed in the CSSWG.
-- Emilio
[1]: https://github.com/w3c/csswg-drafts/issues/6026
On 2/23/21 18:45, Simon Fraser via webkit-dev wrote:
WebKit does not support this feature as specified.
Our opinion is that we don't want to encourage web developers to reserve space for scrollbars in a way that prevents non-interactive content from intruding into that space. This undoes a big advantage of overlay scrollbars, in that they leave more space for content.
Our preference would be some kind of margin value (perhaps a constant) that allows authors to move only interactive content outside of the area affected by overlay scrollbars.
Simon
On Feb 23, 2021, at 5:54 AM, Felipe Erias via webkit-dev <webkit-dev@lists.webkit.org> wrote:
Hi webkit-dev,
This is a request for WebKit's position on the CSS "scrollbar-gutter" property. The spec status is Working Draft. This feature is already implemented in Chrome behind a flag.
Spec: https://drafts.csswg.org/css-overflow-4/#scrollbar-gutter-property
Explainer: https://github.com/felipeerias/scrollbar-gutter-explainer
Existing WebKit bug: https://bugs.webkit.org/show_bug.cgi?id=167335
Summary:
The scrollbar-gutter property provides control over the presence of scrollbar gutters (the space which may be reserved to display a scrollbar).
This gives Web authors more agency over how their layouts interact with the scrollbars provided by the browser, so they can e.g. prevent excessive layout changes as content expands while avoiding unwanted visuals when scrolling isn't needed.
Thanks!
Best. Felipe _______________________________________________ webkit-dev mailing list webkit-dev@lists.webkit.org https://lists.webkit.org/mailman/listinfo/webkit-dev
_______________________________________________ webkit-dev mailing list webkit-dev@lists.webkit.org https://lists.webkit.org/mailman/listinfo/webkit-dev
_______________________________________________ webkit-dev mailing list webkit-dev@lists.webkit.org https://lists.webkit.org/mailman/listinfo/webkit-dev
Thank you very much. In terms of the clarity of the API, I am not sure that it would be a good idea to split the existing functionality into one property and several environment variables. One drawback of env variables is that there will probably be quite a few of them to take into account, whereas scrollbar-gutter provides a simpler solution. I do agree that having them would be a useful addition. Best, Felipe On 24/02/2021 07:41, Emilio Cobos Álvarez via webkit-dev wrote:
I guess that'd solve parts of the issue, but not the use-case of non-overlay scrollbars in overflow: auto causing reflow when the content initially overflows.
But it seems like a much simpler version of scrollbar-gutter (one that would only work with non-overlay scrollbars, and on scrollable boxes) could solve.
-- Emilio
On 2/23/21 22:08, Emilio Cobos Álvarez via webkit-dev wrote:
Just thinking out loud, but has an environment variable for scrollbar widths (maybe two, one for thin scrollbars, one for regular-width scrollbars) be enough to do the job here?
I recall similar proposals in the CSSWG, but I'm not sure if they were discussed seriously. It seems it should be easier to implement, off-hand, and maybe less confusing? And it would allow the pattern Simon mentions here.
It should also allow solving some of the issues people hit with vh/vw if non-overlay scrollbars are used[1]. I guess for that last use-case we'd really need two pairs of values, one of which should return zero for overlay scrollbars for that use-case to work...? Anyhow, seems like this could be discussed in the CSSWG.
-- Emilio
[1]: https://github.com/w3c/csswg-drafts/issues/6026
On 2/23/21 18:45, Simon Fraser via webkit-dev wrote:
WebKit does not support this feature as specified.
Our opinion is that we don't want to encourage web developers to reserve space for scrollbars in a way that prevents non-interactive content from intruding into that space. This undoes a big advantage of overlay scrollbars, in that they leave more space for content.
Our preference would be some kind of margin value (perhaps a constant) that allows authors to move only interactive content outside of the area affected by overlay scrollbars.
Simon
On Feb 23, 2021, at 5:54 AM, Felipe Erias via webkit-dev <webkit-dev@lists.webkit.org> wrote:
Hi webkit-dev,
This is a request for WebKit's position on the CSS "scrollbar-gutter" property. The spec status is Working Draft. This feature is already implemented in Chrome behind a flag.
Spec: https://drafts.csswg.org/css-overflow-4/#scrollbar-gutter-property
Explainer: https://github.com/felipeerias/scrollbar-gutter-explainer
Existing WebKit bug: https://bugs.webkit.org/show_bug.cgi?id=167335
Summary:
The scrollbar-gutter property provides control over the presence of scrollbar gutters (the space which may be reserved to display a scrollbar).
This gives Web authors more agency over how their layouts interact with the scrollbars provided by the browser, so they can e.g. prevent excessive layout changes as content expands while avoiding unwanted visuals when scrolling isn't needed.
Thanks!
Best. Felipe _______________________________________________ webkit-dev mailing list webkit-dev@lists.webkit.org https://lists.webkit.org/mailman/listinfo/webkit-dev
_______________________________________________ webkit-dev mailing list webkit-dev@lists.webkit.org https://lists.webkit.org/mailman/listinfo/webkit-dev
_______________________________________________ webkit-dev mailing list webkit-dev@lists.webkit.org https://lists.webkit.org/mailman/listinfo/webkit-dev
webkit-dev mailing list webkit-dev@lists.webkit.org https://lists.webkit.org/mailman/listinfo/webkit-dev
Thank you very much. I understand that your concern is mainly about the "always" keyword of scrollbar-gutter, where space is reserved for the scrollbar regardless of whether it is of the fixed or overlay kind. This keyword is intended as a simple solution for situations where the overlay scrollbar would cover the content in a way that hindered readability/usability. As you suggest, having some kind of value with the thickness of the overlay scrollbar (an environment variable?) would allow for more fine-grained control in that particular scenario. However, once authors had a reliable way to know the thickness of overlay scrollbars, IMHO there would be nothing stopping them from using that value to prevent their content from being obscured by them. After all, it has become common to set a generous padding on websites to achieve a similar outcome. In general, I think that both approaches are compatible: not all of the use cases served by scrollbar-gutter can be solved with env variables and viceversa. Furthermore, there are some situations where both could be used together. For example, if one wanted to prevent excessive layout changes with fixed scrollbars (with scrollbar-gutter: stable) while moving some individual elements away when overlay scrollbars were in use (with the env variable). Best, Felipe On 24/02/2021 02:45, Simon Fraser wrote:
WebKit does not support this feature as specified.
Our opinion is that we don't want to encourage web developers to reserve space for scrollbars in a way that prevents non-interactive content from intruding into that space. This undoes a big advantage of overlay scrollbars, in that they leave more space for content.
Our preference would be some kind of margin value (perhaps a constant) that allows authors to move only interactive content outside of the area affected by overlay scrollbars.
Simon
On Feb 23, 2021, at 5:54 AM, Felipe Erias via webkit-dev <webkit-dev@lists.webkit.org> wrote:
Hi webkit-dev,
This is a request for WebKit's position on the CSS "scrollbar-gutter" property. The spec status is Working Draft. This feature is already implemented in Chrome behind a flag.
Spec: https://drafts.csswg.org/css-overflow-4/#scrollbar-gutter-property
Explainer: https://github.com/felipeerias/scrollbar-gutter-explainer
Existing WebKit bug: https://bugs.webkit.org/show_bug.cgi?id=167335
Summary:
The scrollbar-gutter property provides control over the presence of scrollbar gutters (the space which may be reserved to display a scrollbar).
This gives Web authors more agency over how their layouts interact with the scrollbars provided by the browser, so they can e.g. prevent excessive layout changes as content expands while avoiding unwanted visuals when scrolling isn't needed.
Thanks!
Best. Felipe _______________________________________________ webkit-dev mailing list webkit-dev@lists.webkit.org https://lists.webkit.org/mailman/listinfo/webkit-dev
To illustrate some of the points that came up in this discussion, I have added several examples to the scrollbar-gutter explainer: https://github.com/felipeerias/scrollbar-gutter-explainer#examples These should run well in Chrome after enabling the "Experimental Web Platform features" in chrome://flags For convenience, I have also added screenshots for each one when using fixed and overlay scrollbars. Best, Felipe On 23/02/2021 22:54, Felipe Erias via webkit-dev wrote:
Hi webkit-dev,
This is a request for WebKit's position on the CSS "scrollbar-gutter" property. The spec status is Working Draft. This feature is already implemented in Chrome behind a flag.
Spec: https://drafts.csswg.org/css-overflow-4/#scrollbar-gutter-property
Explainer: https://github.com/felipeerias/scrollbar-gutter-explainer
Existing WebKit bug: https://bugs.webkit.org/show_bug.cgi?id=167335
Summary:
The scrollbar-gutter property provides control over the presence of scrollbar gutters (the space which may be reserved to display a scrollbar).
This gives Web authors more agency over how their layouts interact with the scrollbars provided by the browser, so they can e.g. prevent excessive layout changes as content expands while avoiding unwanted visuals when scrolling isn't needed.
Thanks!
Best. Felipe _______________________________________________ webkit-dev mailing list webkit-dev@lists.webkit.org https://lists.webkit.org/mailman/listinfo/webkit-dev
Hi webkit-dev, This is a request for an updated position on scrollbar-gutter. The initial version of this spec raised concerns among WebKit and Gecko, mainly regarding its interaction with overlay scrollbars. These issues were eventually solved in a CSS WG meeting where it was agreed to reduce the scope of this property to the functionality that could gather unanimous support among the browser representatives. The updated spec can be summarized as follows: * the syntax of scrollbar-gutter becomes auto | stable && both-edges? where — "auto" keeps the default behaviour; — "stable" reserves space for a classic scrollbar along the inline edge when the overflow value of the box is auto, scroll, or hidden; — "both-edges" reserves a symmetrical space on the opposite edge. * with overlay scrollbars, scrollbar-gutter does not have any effect. Thank you so much. Best, Felipe References: https://drafts.csswg.org/css-overflow-4/#scrollbar-gutter-property https://github.com/w3c/csswg-drafts/issues/4674#issuecomment-857841639 https://github.com/w3c/csswg-drafts/issues/6349#issuecomment-880053625 On 23/02/2021 22:54, Felipe Erias via webkit-dev wrote:
Hi webkit-dev,
This is a request for WebKit's position on the CSS "scrollbar-gutter" property. The spec status is Working Draft. This feature is already implemented in Chrome behind a flag.
Spec: https://drafts.csswg.org/css-overflow-4/#scrollbar-gutter-property
Explainer: https://github.com/felipeerias/scrollbar-gutter-explainer
Existing WebKit bug: https://bugs.webkit.org/show_bug.cgi?id=167335
Summary:
The scrollbar-gutter property provides control over the presence of scrollbar gutters (the space which may be reserved to display a scrollbar).
This gives Web authors more agency over how their layouts interact with the scrollbars provided by the browser, so they can e.g. prevent excessive layout changes as content expands while avoiding unwanted visuals when scrolling isn't needed.
Thanks!
Best. Felipe _______________________________________________ webkit-dev mailing list webkit-dev@lists.webkit.org https://lists.webkit.org/mailman/listinfo/webkit-dev
participants (3)
-
Emilio Cobos Álvarez
-
Felipe Erias
-
Simon Fraser