[webkit-dev] Request for position: CSS scrollbar-gutter

[Felipe Erias]

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 at 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 at lists.webkit.org
>>>> https://lists.webkit.org/mailman/listinfo/webkit-dev
>>>
>>> _______________________________________________
>>> webkit-dev mailing list
>>> webkit-dev at lists.webkit.org
>>> https://lists.webkit.org/mailman/listinfo/webkit-dev
>>>
>> _______________________________________________
>> webkit-dev mailing list
>> webkit-dev at lists.webkit.org
>> https://lists.webkit.org/mailman/listinfo/webkit-dev
> _______________________________________________
> webkit-dev mailing list
> webkit-dev at lists.webkit.org
> https://lists.webkit.org/mailman/listinfo/webkit-dev