[css-overflow-3] Scrollable Overflow contributions of zero height/width elements

[fantasai]

It appears that, at least in some implementations, zero-width elements do not contribute to the horizontal overflow, but zero-height elements do contribute to the vertical overflow.

So overall it seems that zero-sized things contribute in the block axis but not the inline axis.

This is kinda weird, but if it's required for Web-compat we should spec it.

[fantasai]

Testcase A (block-level): http://software.hixie.ch/utilities/js/live-dom-viewer/?%3C!DOCTYPE%20html%3E%0A%3Cstyle%3E%0A.one%20%7B%20width%3A%20120vw%3B%20height%3A%200%3B%20%7D%0A.two%20%7B%20width%3A%200%3B%20height%3A%20120vh%3B%20%7D%0A%3C%2Fstyle%3E%0A%3Cp%20class%3D%22one%22%3E%0A%3Cp%20class%3D%22two%22%3E

Testcase B (abspos): http://software.hixie.ch/utilities/js/live-dom-viewer/?%3C!DOCTYPE%20html%3E%0A%3Cstyle%3E%0A.one%20%7B%20position%3A%20absolute%3B%20width%3A%20120vw%3B%20%7D%0A.two%20%7B%20position%3A%20absolute%3B%20height%3A%20120vh%3B%20%7D%0A%3C%2Fstyle%3E%0A%3Cp%20class%3D%22one%22%3E%0A%3Cp%20class%3D%22two%22%3E

We seem to have interop across Gecko/Blink/WebKit that the tall block-level element contributes to overflow, and none of the others do.

[bfgeek]

Specifically for the inflow case this is affecting the "inflow" bounds, the element isn't directly contributing overflow itself. You can test this by adding a transform to both elements - neither affect the scrollable area.

[css-meeting-bot]

The CSS Working Group just discussed Scrollable overflow.

The full IRC log of that discussion

Topic: Scrollable overflow
github: https://github.com//issues/4791
fantasai: Seem to have weird but interoperable behavior here, question was should we spec it
iank_: not so weird, we compute the "inflow" bounds
iank_: ...
iank_: If you add a transform to the item and move it outside the scrollable area
iank_: all browsers transform out
iank_: if something is zero area, it doesn't itself contribute, but it might contribute to "infow bounds"
fantasai: ???
iank_: If you have something like a grid area, that's where we determine where to put the "padding" to contribute to overflow
iank_: Here it's the body element contributing to the scrollable area
fantasai: OK, so need to set body to zero to test correctly and issue is invalid?
iank_: question of adding to overflow is just if it's empty
fantasai: Actually, there is an issue, but it's just that if the border area is empty, we need to exclude from the scrollable area
iank_: yea, but also this other thing

[fantasai]

OK, 1. so the testcases need to add html, body { height: 0; } to work properly and 2. we need to spec that boxes with empty area do not contribute to scrollable overflow. If I understood @bfgeek correctly?

[bfgeek]

Thats correct. At least "directly" to scrollable overflow. They can indirectly contribute to scrollable overflow via something like:

>
<div style="width: 100px; height: 100px; overflow: scroll; display: grid;">
  <div style="width: 0; height: 120px; outline: solid red;">div>
  <div style="width: 120px; height: 0; outline: solid green;">div>
div>

[css-meeting-bot]

The CSS Working Group just discussed css-overflow-3, and agreed to the following:

• RESOLVED: Elements with a zero-area border-box do not directly contribute to scrollable overflow area.

The full IRC log of that discussion

Topic: css-overflow-3
github: https://github.com//issues/4791#issuecomment-862553085
fantasai: If an element has zero area in its border box, it doesn't directly contribute to scrollable overflow
fantasai: It can have indirect effects, if it increases the height of its parent box or something
fantasai: But the element *itself* doesn't appear to do anything in impls. Should we add that to the spec?
astearns: Seems reasonable
florian: Yes, both because interop is good to spec, and because authors really hate when invisible boxes have side-effects
astearns: Would be great to have these tested properly too
astearns: So proposed resolution is to specify that zero-area border-box elements do not directly contribute to scrollable overflow area
astearns: Objections?
RESOLVED: Elements with a zero-area border-box do not directly contribute to scrollable overflow area.

[fantasai]

@bfgeek Edited into https://drafts.csswg.org/css-overflow-3/#scrollable
Let us know if that looks to be correct?

[TKDev7]

@fantasai Is there anything left with this issue?

[fantasai]

@MrHBS No, just wanted to ask @bfgeek to sign off that the edits are correct.