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

[Felipe Erias]

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 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
> 
>