Re: [csswg-drafts] [css-overflow-3] What clips scrollable overflow? (#8607)

I think we have a little less interop than we thought with `overflow: clip`.

TL;DR: The problematic case is when a float overflows in the block axis.

Here's a [test case](http://software.hixie.ch/utilities/js/live-dom-viewer/?saved=11610) It has a float, inside of a box with `overflow: clip`, itself followed by a box with `clear: both`, all of that inside of a box with `overflow: auto`. Then that's repeated, but without the box with clearance.

First, in Safari, the test doesn't work, because it seems that `overflow: clip` stops having any effect at all (!) if a float overflows in the block axis. It would take effect in the inline axis if there was no block overflow, or if any block axis overflow was caused by something other than a float, like an abspos. Hard to think that's anything but a bug, but that bug could be a sign of "it's harder than we thought". [testcase for that](http://software.hixie.ch/utilities/js/live-dom-viewer/?saved=11611)

Back to the main test case.

In Chrome and Firefox (and Safari if you modify the test case to remove block overflow), `overflow: clip` does suppress the inline axis scrolling potentially caused by a protruding float. This is what the opening comment tested for and claimed interop about.

However, things get more "interesting" in the block axis:
* As stated above, `overflow: clip` stops working altogether in Safari when a float overflows in the block axis
* In both Chrome and Firefox, there is interop about the spec requirement that an `overflow: clip` element does not establish a BFC, and therefore the box with clearance is pushed down by the invisible geometry of the clipped float. Therefore we do get vertical scrolling (triggered by the box with clearance).
* However, if we remove the box with clearance, we get a difference:
    *  In Chrome, just like in the inline axis, the invisible geometry of the clipped float **does not** trigger scroll overflow in the block axis, so we **do not** get a vertical scrollbar.
    *  In Firefox, the invisible geometry of the clipped float **does** trigger scroll overflow in the block axis, so we **do** get a vertical scrollbar.

If we try to have something other than a float cause the overflow, [for instance with an abspos](http://software.hixie.ch/utilities/js/live-dom-viewer/?saved=11613), then we do have interop in all 3 browsers that the clipped content **does not** trigger scroll overflow in either axis.

----

In conclusion, what the spec currently says is that `overflow:clip`  visually clips the content without providing scrollbars (nor programatic scrolling) on the clipping element itself. I believe we do have interop on that.

But whether the protruding geometry can cause scrollbars on ancestor elements does not have full interop. We seem closer to agreement on not scrolling than the other way around, but we're not fully there: when a float overflows in the block axis, we get 3 possible behaviors: clear and scroll, clear but don't scroll, or give up.

Question to the group (and particularly to Safari and Firefox): do you consider that a bug that you intend to fix, and we can therefore stick with the resolution, or does that cause a need to rethink?

-- 
GitHub Notification of comment by frivoal
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/8607#issuecomment-1533932813 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Thursday, 4 May 2023 01:04:58 UTC