[css-overflow-4] viewport propagation of scrollbar-gutter #6079

felipeerias · 2021-03-05T03:53:34Z

https://drafts.csswg.org/css-overflow-4/#scrollbar-gutter-property

The overflow-* values set on the root or body elements are propagated to the viewport following the rules specified in section 3.5. Overflow Viewport Propagation of the CSS Overflow spec. The element from which the value was propagated will subsequently get a used value of visible.

The purpose of this issue is to ask what happens when scrollbar-gutter is used on an element from which overflow may be propagated to the viewport.

The expected outcome IMHO would be that the element gets a gutter that matches the scrollbar used by the viewport.

In any case, I think that the spec should cover this situation

The text was updated successfully, but these errors were encountered:

felipeerias · 2021-03-26T05:05:11Z

If the value of overflow-guter is propagated to the viewport, perhaps section 6 in CSSOM View Module should be amended so clientWidth on the root/body takes the presence of a scrollbar gutter into account:

The clientWidth attribute must run these steps:
... 

2. If the element is the root element and the element’s node 
document is not in quirks mode, or if the element is the HTML 
body element and the element’s node document is in quirks mode, 
return the viewport width excluding the size of a **rendered** 
scroll bar (if any).

https://www.w3.org/TR/cssom-view-1/#dom-element-clientwidth

(Same for clientHeight)

felipeerias · 2021-03-29T14:16:08Z

Related: #5254

felipeerias · 2021-04-07T13:13:43Z

I have added a small example to the explainer (it only works on experimental code at the moment):

https://github.com/felipeerias/scrollbar-gutter-explainer/blob/master/examples/scrollbar_gutter_example_08.html

This is the result of applying scrollbar-gutter: stable both; on the body. In the image on the left the content doesn't cause scrolling; in the image on the right, it does.

The gutters match the scrollbars created by the viewport, which IMHO would be the expected outcome.

css-meeting-bot · 2021-04-08T23:53:06Z

The CSS Working Group just discussed viewport propagation of scrollbar-gutter, and agreed to the following:

RESOLVED: We propagate scrollbar-gutter from the root to the viewport
RESOLVED: Scrollbar-gutter does not propagate from <body>
RESOLVED: No future properties should propagate from <body> to the ICB
RESOLVED: deprecate any existing use of body propagation

The full IRC log of that discussion

<Rossen__> Topic: viewport propagation of scrollbar-gutter
<Rossen__> github: https://github.com//issues/6079
<myles> chrishtr: when you apply properties on the HTML or body elements, under certain conditions, ti gets propagated to the root element's scroller. Does this apply to scrollbar gutter properties? Proposed: yes.
<myles> Rossen: This is reverse propagation thing for overflow and direction
<myles> fantasai: Overflow doesn't inherit so it's less bad
<Rossen__> ack fantasai
<myles> fantasai: I absolutely hate body propagation rules in CSS. They should die. The web depends on them. I don't want it to propagated from teh body to the viewport
<tantek> +1 fantasai
<myles> emilio: Right. The scroll-snap stuff, and the thing that allows you to do smooth scrolling, those don't propagate.
<fantasai> s/The web/But the web/
<myles> chrishtr: If the user puts overflow on the body, and <missed> then they're just out of luck?
<myles> florian: They should put it on the root instead.
<fantasai> s/to the viewport/to the viewport. But we do need to specify that it propagates from the root to viewport./
<myles> florian: Putting things on HTML instead of body causes no problem. It's confusing if you've put it on body and it works, but you want to put other stuff on body but it doesn't work
<tantek> +1 florian, can we deprecate putting it on body so it's still "supported" but warned in CSS validators?
<myles> Rossen: let's go back to the actual issue here
<myles> Rossen: There's a proposal here about scrollbar gutter.
<myles> Rossen: For better or worse, we have behavior today that does the propagation
<myles> Rossen: Can we make that work for scrollbar gutter as well
<myles> florian: There are 2 potential resolution. The first is required. Propagate from the root to the viewport is required. Whether or not we ALSO propagate from the body is controvertial
<tantek> +1
<myles> fantasai: Let's resolve that we propagate from root to viewport first.
<myles> Rossen: Any objections?
<myles> RESOLVED: We propagate scrollbar-gutter from the root to the viewport
<myles> Rossen: Now what about body?
<myles> Rossen: It still works everywhere. I think our mutual feelings are the same.
<heycam> q+
<myles> fantasai: We're not saying that it should stop working on overflow. W'ere saying we shouldnt' add more properties to that list
<chrishtr> q+
<tantek> can we instead introduce an informative WARNING about depending on <body> propagation? (i.e. that devtools could flag for example)
<myles> emilio: There was a huge discussion years ago in gecko and other browsers. Gecko only propagates overflow and .....
<myles> florian: Overflow, background, and writing mode
<myles> emilio: Browser do differen things. Fancy new properties dont' propagate. Let's leave it as it is. Not propagate from body to root.
<tantek> +1 emilio
<florian> s/writing-mode/principal writing mode (i.e. writing-mode and direction)/
<fantasai> tantek, I'm happy to warn about it for the properties which currently do propagate (overflow/background/direction/writing-mode). But I *do not* want to add more properties to that list.
<tantek> fantasai, 100%
<myles> emilio: A lot of other properties dont' eitehr
<myles> iank_: Overscroll behavior does.
<myles> emilio: Scroll snap does
<myles> emilio: Those only work on the root
<myles> emilio: If UAs want to add a warning, if you detect you ahve a body that's not scrollable and it has scroll properties, they can log them to the console, that would be helpful, but let's not add more propagation
<myles> Rossen: It's less worse to put your custom scroll bar ... is to not have the appropriate space for it, so you're risking to have some broken UI experience in this case
<Rossen__> q?
<myles> florian: If you apply a property and it doesnt' do what you want then ... <missed>
<florian> s/... <missed>/you fix your code/
<Rossen__> ack heycam
<myles> heycam: I was going to askw hat the specific list of scrollbar related properties is that currently propagates from body to the viewport. I don't wnat to end up in a situation where some scrollbar related things propagate but others don't. If scroll snaping and scrollbar color and scrollbar width propagate, then that's good
<tantek> A-ha "scrollbar-color value set on the HTML body element are not propagated to the viewport." https://drafts.csswg.org/css-scrollbars-1/#scrollbar-color
<fantasai> s/propagate/propagate don't propagate/
<myles> chrishtr: I'm okay with the not body thing.
<myles> chrishtr: That shortens the conversation
<myles> Rossen: I'm okay with this.
<myles> Rossen: Anyone else want to keep it?
<myles> Rossen: Objections?
<tantek> can we generalize that to any future scroll-*?
<myles> RESOLVED: Scrollbar-gutter does not propagate from <body>
<myles> fantasai: Tantek is asking "can we generalize ..."
<tantek> yes please fantasai
<myles> fantasai: The proposed resolution is "don't propagate anythign else ever"
<myles> chrishtr: Do we need a resolution for scrollbar-width and one other?
<tantek> s/else ever/else ever from BODY to viewport
<myles> emilio: Those already don't propagate
<myles> Rossen: I think that was the generalized proposed resolution that fantasai said
<fantasai> chrishtr, they do propagate from the root already
<tantek> no more BODY propagation
<myles> Rossen: "Anything outside of overflow, direction, and background should not propagate from body"
<myles> florian: In addition, we need to propagate some things from HTML to the viewport
<myles> florian: Otherwise you can't change the scrollbar width
<myles> Rossen: I'm talking about <body>
<myles> florian: We should open a new issue about which things need to be propagated and are missing
<myles> fantasai: Proposed resolution: no future properties will propagate from <body> to the ICB
<tantek> +1
<myles> chrishtr: I'll open a new issue about scrollbar-width on the HTML element
<florian> s/to be propagated /to be propagated from :root/
<myles> Rossen: No new objectsion
<fantasai> chrishtr, the spec already defines this
<fantasai> chrishtr, see https://drafts.csswg.org/css-scrollbars-1/#scrollbar-width
<fantasai> chrishtr, no need to open an issue...
<myles> RESOLVED: No future properties should propagate from <body> to the ICB
<chrishtr> fantasai, great!
<tantek> even current properties that don't say they propagate too right?
<fantasai> s/ICB/ICB or viewport/
<myles> fantasai: Tantek said something in IRC
<myles> tantek: proposal: deprecate, or add a warning, to any existing use of body propagation. This would enable CSS validators and dev tools to warn and flag when they depend on that behavior
<myles> emilio: I don't feel strongly. but sure.
<myles> emilio: Dev tools can warn for whatever without anything in the spec
<myles> emilio: We warn for stuff that doesn't apply. Saying "this is bad and you should feel bad" is not good
<myles> fantasai: I'm fine with deprecating and making that a statemetn so it can make its way to author-facing materials
<myles> fantasai: Deprecating settings values on <body> with the expectation it propagates to root
<myles> florian: Making it officially bad. "please don
<myles> florian: 't do this"
<myles> RESOLVED: deprecate any existing use of body propagation
<fantasai> scribenick: fantasai

This CL implements the propagation of scrollbar-gutter from the root element to the viewport. Relevant CSSWG discussion: w3c/csswg-drafts#6079 LayoutBox will not try to apply scrollbar gutters to the element which propagated its overflow properties to the viewport ("viewport-defining element") to avoid duplicating the ones that may be created by the viewport itself. Note: following the current CSSOM View spec, clientWidth and clientHeight in the viewport-defining element will return the corresponding viewport dimension excluding the size of any rendered scrollbars, but not excluding empty scrollbar gutters: https://www.w3.org/TR/cssom-view-1/#dom-element-clientwidth https://www.w3.org/TR/cssom-view-1/#dom-element-clientheight Bug: 710214 Change-Id: I65dca9791125d91b8be7b7c51779d5821f232cf9 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2766822 Commit-Queue: Felipe Erias <felipeerias@igalia.com> Reviewed-by: Philip Rogers <pdr@chromium.org> Reviewed-by: Christian Biesinger <cbiesinger@chromium.org> Cr-Commit-Position: refs/heads/master@{#871779}

…rt, a=testonly Automatic update from web-platform-tests Propagate scrollbar-gutter to the viewport This CL implements the propagation of scrollbar-gutter from the root element to the viewport. Relevant CSSWG discussion: w3c/csswg-drafts#6079 LayoutBox will not try to apply scrollbar gutters to the element which propagated its overflow properties to the viewport ("viewport-defining element") to avoid duplicating the ones that may be created by the viewport itself. Note: following the current CSSOM View spec, clientWidth and clientHeight in the viewport-defining element will return the corresponding viewport dimension excluding the size of any rendered scrollbars, but not excluding empty scrollbar gutters: https://www.w3.org/TR/cssom-view-1/#dom-element-clientwidth https://www.w3.org/TR/cssom-view-1/#dom-element-clientheight Bug: 710214 Change-Id: I65dca9791125d91b8be7b7c51779d5821f232cf9 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2766822 Commit-Queue: Felipe Erias <felipeerias@igalia.com> Reviewed-by: Philip Rogers <pdr@chromium.org> Reviewed-by: Christian Biesinger <cbiesinger@chromium.org> Cr-Commit-Position: refs/heads/master@{#871779} -- wpt-commits: bdd89b5c5a5c17d1c5db48d6d70513ed4deb9232 wpt-pr: 28282

See #6079

frivoal · 2021-06-18T03:00:04Z

Fixed in 0280a0a

This CL implements the propagation of scrollbar-gutter from the root element to the viewport. Relevant CSSWG discussion: w3c/csswg-drafts#6079 LayoutBox will not try to apply scrollbar gutters to the element which propagated its overflow properties to the viewport ("viewport-defining element") to avoid duplicating the ones that may be created by the viewport itself. Note: following the current CSSOM View spec, clientWidth and clientHeight in the viewport-defining element will return the corresponding viewport dimension excluding the size of any rendered scrollbars, but not excluding empty scrollbar gutters: https://www.w3.org/TR/cssom-view-1/#dom-element-clientwidth https://www.w3.org/TR/cssom-view-1/#dom-element-clientheight Bug: 710214 Change-Id: I65dca9791125d91b8be7b7c51779d5821f232cf9 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2766822 Commit-Queue: Felipe Erias <felipeerias@igalia.com> Reviewed-by: Philip Rogers <pdr@chromium.org> Reviewed-by: Christian Biesinger <cbiesinger@chromium.org> Cr-Commit-Position: refs/heads/master@{#871779} GitOrigin-RevId: 7041b70b8dd3c0019a43a625ad080faa24092dc0

fantasai added the css-overflow-4 label Mar 23, 2021

chrishtr added Agenda+ Agenda+ F2F labels Apr 7, 2021

chrishtr removed the Agenda+ label Apr 8, 2021

css-meeting-bot removed the Agenda+ F2F label Apr 8, 2021

mozilla-apprentice mentioned this issue Apr 8, 2021

[css-overflow-4] viewport propagation of scrollbar-gutter mozilla/wg-decisions#521

Open

chromium-wpt-export-bot mentioned this issue Apr 13, 2021

Propagate scrollbar-gutter to the viewport web-platform-tests/wpt#28282

Merged

mirisuzanne mentioned this issue Apr 29, 2021

[css-contain] :root/body viewport propagation and containment #5913

Closed

alisonmaher mentioned this issue May 24, 2021

[css-color-adjust] viewport propagation of forced-color-adjust #6307

Closed

fantasai added the Needs Edits label Jun 1, 2021

frivoal added Tested Memory aid - issue has WPT tests Closed Accepted by CSSWG Resolution and removed Needs Edits labels Jun 18, 2021

frivoal added a commit that referenced this issue Jun 18, 2021

[css-overflow] Propagate scrollbar-gutter to the viewport

0280a0a

See #6079

frivoal closed this as completed Jun 18, 2021

Loirooriol mentioned this issue Jun 25, 2021

[css-overscroll-behavior] Should we propagate non-auto overscroll-behavior from either root element or body? #6406

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[css-overflow-4] viewport propagation of scrollbar-gutter #6079

[css-overflow-4] viewport propagation of scrollbar-gutter #6079

felipeerias commented Mar 5, 2021

felipeerias commented Mar 26, 2021 •

edited

Loading

felipeerias commented Mar 29, 2021

felipeerias commented Apr 7, 2021

css-meeting-bot commented Apr 8, 2021

frivoal commented Jun 18, 2021

[css-overflow-4] viewport propagation of scrollbar-gutter #6079

[css-overflow-4] viewport propagation of scrollbar-gutter #6079

Comments

felipeerias commented Mar 5, 2021

felipeerias commented Mar 26, 2021 • edited Loading

felipeerias commented Mar 29, 2021

felipeerias commented Apr 7, 2021

css-meeting-bot commented Apr 8, 2021

frivoal commented Jun 18, 2021

felipeerias commented Mar 26, 2021 •

edited

Loading