[css-grid-2] Subgrid and scrollbars

[frivoal]

css-grid-2 is explicit that the margin/border/padding of a subgrid gets taken into account in the sizing of its parent grid's tracks, and also that the overflow property does work on subgrids. However, it's not very clear that the size of the scrollbar gets taken into account as well.

Here's a bit of a contrieved example, first without a scrollbar:

<div id=grid>
  <a></a><b></b>
  <div id=subgrid>
    <div id=item></div>
  </div>
</div>
<style>
#grid {
  display: grid;
  grid-template-columns: auto min-content;
  width: max-content;
}
#subgrid {
  display: grid;
  grid-template-columns: subgrid;
  grid-column: span 2;
  border-right: solid 16px orange;
  padding-right: 16px;
  background: yellow;
  height: 100px;
  overflow: clip;
}
#item {
  background: blue;
  height: 150px;
  width: 100px;
}
b {
  background: teal;
  height: 16px;
}
a {
  background: pink;
  height: 16px;
}
</style>

Assuming I understand the spec correctly, the expected rendering is:

This is indeed what Firefox does, as you can see in http://software.hixie.ch/utilities/js/live-dom-viewer/saved/9360

Now, if we add #subgrid { overflow-y: scroll; }, I'd expect no difference to the layout in the case of overlay scrollbars, but in the case of classic scrollbars, I'd expect the scrollbar to be inserted between the yellow and the orange box, and which should make the the width of second grid column (and the teal box at the top) grow by the size of the scrollbar.

Assuming we agree on that, I'd also expect that

• if there was no padding or border on the subgrid, and only the scrollbar, it would still be in that second grid column, whose size would still take it into account.
• if we have overflow-y: auto rather than overflow scroll, the scrollbar would still be in that second grid column, whose size would still take it into account.

cc: @fantasai @Loirooriol

[Loirooriol]

This doesn't seem specific of scrollbars, it seems Firefox is not taking borders and margins into account either? Just the padding. Testcase

[emilio]

cc @aethanyc

[frivoal]

I think Firefox has a bug as soon as overflow is anything other than visible or clip, but from a spec point of view the text forgot about the scrollbars, and probably should be clarified.

[Loirooriol]

Maybe the spec should just refer to the outer size? This includes padding, borders, margins and scrollbars without having to list them all.

[aethanyc]

This doesn't seem specific of scrollbars, it seems Firefox is not taking borders and margins into account either? Just the padding. Testcase

Yes, this is a bug, and should already be fixed in Firefox 90 (Bug 1709491). And grid area and grid item's margin is going to be included in the scrollable overflow area in Bug 1527539.

Coincidentally, I'm also investigating Firefox's behavior on subgrid and scrollbars for a while in Bug 1711803. My thought was that the subgrid has only explicit grid area, and the scrollbar size shouldn't affect the subgrid area whether it is overlay or classic. See bug 1711803 comment 2. However, I don't feel strong about it. If the spec is clear that we should take the classic scrollbar's size it into account, i.e., we like Firefox's current behavior. I'm totally OK with it.

cc @MatsPalmgren @dholbert

[frivoal]

@aethanyc

should already be fixed in Firefox 90

Based on a very limited amount of testing, Firefox 90 indeed does what I'd expect. ❤️

As for Bug 1711803, maybe I'm missing some subtlety, but as far as I understand it, the current behavior is the desirable one. Non overlay scrollbars do take space, and they take that space between the padding and the border, so if we don't take that space into account in operations that look at how bing margin/border/padding are, we're going to end up reserving the "wrong" amount of space, and this will end up being out of whack.

Yes, the fact that with overflow:auto, that space changes depending on whether you're actually overflowing or not is unpleasant, but that's why we need scrollbar-gutter: stable.

[aethanyc]

@frivoal Thanks for the explanation. After understanding the purpose of scrollbar-gutter, now I can see Bug 1711803 doesn't make sense. I've closed the bug.

[Loirooriol]

@aethanyc The first case in here still seems wrong, though? Also, unstable layout if I add/remove a border dynamically.

[aethanyc]

@aethanyc The first case in here still seems wrong, though? Also, unstable layout if I add/remove a border dynamically.

@Loirooriol Thanks! I filed bug 1715178.

[tabatkins]

Added explicit reference to scrollbar gutters (it'll link up once we fix Overflow to export the term properly). Assuming this is a Commenter Satisfied, since it's precisely what @frivoal asked for. ^_^