Not clamping baseline position when scrollable overflow gives weird results #7660

tabatkins · 2022-08-29T21:48:20Z

Currently, the spec defines that the baselines of scrollable flex/grid items are calculated assuming the item is at its initial scroll position. This allows (and impls currently accept) the baseline to be substantially outside of the box itself, if the first line of text is taller than the box.

See testcase:

<!DOCTYPE html>
<div style="display: inline-flex; border: solid; overflow: scroll; height: 100px; font-size: 200px">
  This<br>is<br>a<br>text
</div>
text

Per our (not currently applied to the spec...) resolution in #2781, scrollable inline-blocks should take their baseline from their content, clamped by the bottom edge of the box, precisely to avoid this unintuitive behavior. (That said, for inline blocks specifically, we may be constrained by compat to ignoring the baselines of scrollable boxes and just using the margin edge; but at least it's still within the edges of the box.)

Regardless of inline blocks, we should apply this clamping behavior in flex and grid layout, and to whichever atomic inlines we can.

This would be a change away from cross-browser consistent behavior, but the current behavior is very bad and very unlikely to be relied upon (it requires the first line to be taller than the item). As last-baseline alignment begins to be implemented, however, it will become much easier to trigger.

bfgeek · 2022-08-29T23:58:50Z

One thing I'd like to discuss is the edge to clamp to - I suspect border-box edge will be a little more consistent (e.g. this is typically what we synthesize off).

fantasai · 2022-08-30T00:18:46Z

+1 to border-box edge

css-meeting-bot · 2022-09-15T18:57:52Z

The CSS Working Group just discussed Not clamping baseline position when scrollable overflow gives weird results, and agreed to the following:

RESOLVED: baselines of a scrollable container should be clamped to the scrollable area

The full IRC log of that discussion

<Rossen_> Topic: Not clamping baseline position when scrollable overflow gives weird results
<Rossen_> github: https://github.com//issues/7660
<fremy> fantasai: sorry, inline-flex not inline-block
<fremy> fantasai: the issue is that the text is bigger than the box itself
<fremy> fantasai: so, the reste of the text is aligned to a line that is beyond the box itself
<fremy> fantasai: which doesn't make much sense
<fremy> fantasai: the proposal is to clamp the baseline to the border box
<fremy> Rossen_: do we also do this in the other direction?
<fremy> fantasai: good point, we probably should do it in this direction as well
<fremy> asterns: what is the effect that this would do?
<florian> q+
<fremy> Rossen_: align "text" to the bottom of the scrollable box
<Rossen_> ack florian
<fremy> dbaron: this would be based based on the initial scroll position?
<fremy> fantasai: yes
<fremy> florian: what about overflow: clip?
<fremy> TabAtkins: probably the same?
<fremy> iank_: well
<emilio> q+
<fremy> iank_: probably we don't want that because we resolved that overflow:clip should not have any effect on the layout
<emilio> q-
<fremy> iank_: there is already some margin clipping anyway
<fremy> dbaron: I agree, clip should not apply
<emilio> +1 to dbaron :)
<emeyer> q+
<fremy> emilio: I concur as well
<fremy> TabAtkins: currently, the reverse issue exists
<dbaron> s/clip should not apply/overflow:clip should not do anything different because overflow:clip shouldn't influence layout/
<Rossen_> ack emeyer
<heycam> q+
<fremy> rob: am I correct that the baseline can not be above or beyond the scrollable area?
<fremy> fantasai: yes, correct
<fremy> rob: then, sure, no objection
<fantasai> s/rob/emeyer/
<fantasai> s/rob/emeyer/
<Rossen_> q
<heycam> q-
<fremy> dholbert: the correct rendering would be that the border would align with the text
<fremy> dholbert: but we don't want to do that, right?
<iank_> q+
<fremy> Rossen_: yes, otherwise we would need to take a dependency on the font size etc...
<fremy> Rossen_: so, the proposed resolution is to clamp the baseline
<fremy> Rossen_: any other comment?
<dholbert> clarifying my question: I was asking if the border-top of the scrollable thing would align with the baseline of the text. And the answer was yes, it would
<dholbert> (in the "reverse scenario")
<fremy> iank_: can we keep last-baseline separated from this?
<fantasai> s/keep/keep inline-block/
<fremy> iank_: I don't want to change the margin behavior yet
<Rossen_> ack iank_
<fremy> TabAtkins: I'm fine with this for now
<fremy> Rossen_: any objection?
<fremy> RESOLVED: baselines of a scrollable container should be clamped to the scrollable area

dholbert · 2022-09-15T18:57:59Z

Here's a version where the baseline is above the start edge:

<!DOCTYPE html>
<div style="display: inline-flex; border: solid; overflow: scroll; height: 300px; font-size: 200px">
<div style="margin-top: -250px">This<br>is<br>a<br>text</div></div> text

As discussed, the expectation here would be that the border-top should be aligned with the baseline of "text".

... if in a scroll container. See: w3c/csswg-drafts#7660 Effectively if we are in a scroll container (overflow:hidden or overflow:scroll) clamp the baselines to the border-box edges. Bug: 885175 Change-Id: I9c53e736fa156c5239384a5d11154a27643a6ac8

... if in a scroll container. See: w3c/csswg-drafts#7660 Effectively if we are in a scroll container (overflow:hidden or overflow:scroll) clamp the baselines to the border-box edges. Bug: 885175 Change-Id: I9c53e736fa156c5239384a5d11154a27643a6ac8 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3925659 Commit-Queue: Ian Kilpatrick <ikilpatrick@chromium.org> Reviewed-by: David Grogan <dgrogan@chromium.org> Cr-Commit-Position: refs/heads/main@{#1054237}

fantasai · 2022-10-03T22:57:58Z

Spec text is already at the end of https://www.w3.org/TR/css-align-3/#baseline-export

If, in the case of a scroll container box, the resulting position of a first/last baseline is past a box’s end/start border edge, its position is clamped to that border edge.

It's a little hard to read, so we rewrote it to

If the position of a scroll container’s first/last baseline is outside its border edge, that baseline’s position is clamped to the border edge.

... if in a scroll container. See: w3c/csswg-drafts#7660 Effectively if we are in a scroll container (overflow:hidden or overflow:scroll) clamp the baselines to the border-box edges. Bug: 885175 Change-Id: I9c53e736fa156c5239384a5d11154a27643a6ac8 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3925659 Commit-Queue: Ian Kilpatrick <ikilpatrick@chromium.org> Reviewed-by: David Grogan <dgrogan@chromium.org> Cr-Commit-Position: refs/heads/main@{#1054237} NOKEYCHECK=True GitOrigin-RevId: 75f43ae40f2f7cceb000b81271819b8ffd875180

…es to border-box..., a=testonly Automatic update from web-platform-tests [last-baseline] Clamp first/last baselines to border-box... ... if in a scroll container. See: w3c/csswg-drafts#7660 Effectively if we are in a scroll container (overflow:hidden or overflow:scroll) clamp the baselines to the border-box edges. Bug: 885175 Change-Id: I9c53e736fa156c5239384a5d11154a27643a6ac8 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3925659 Commit-Queue: Ian Kilpatrick <ikilpatrick@chromium.org> Reviewed-by: David Grogan <dgrogan@chromium.org> Cr-Commit-Position: refs/heads/main@{#1054237} -- wpt-commits: a7ca49d8492524b6ff426ec6e7d424657bb3502d wpt-pr: 36228

tabatkins added css-align-3 Current Work css-flexbox-1 Current Work css-grid-1 Agenda+ labels Aug 29, 2022

fantasai mentioned this issue Aug 29, 2022

[css-align-3] Do the CSS2.1 rules apply for determining the last-baseline of flex/grid/etc ? #7638

Open

bfgeek added the Agenda+ TPAC label Sep 1, 2022

astearns removed the Agenda+ label Sep 8, 2022

astearns added this to 3:30-4:45 in TPAC Thursday 2022 Sep 11, 2022

astearns moved this from 3:30-4:45 to 11:45-12:30 in TPAC Thursday 2022 Sep 15, 2022

fantasai added Closed Accepted by CSSWG Resolution Needs Edits labels Sep 15, 2022

astearns removed the Agenda+ TPAC label Sep 15, 2022

mozilla-apprentice mentioned this issue Sep 15, 2022

Not clamping baseline position when scrollable overflow gives weird results mozilla/wg-decisions#891

Closed

css-meeting-bot mentioned this issue Sep 15, 2022

[css-align-3][css-flexbox-1] How to determine the last baseline of a flex container with different alignment groups. #7641

Open

chromium-wpt-export-bot mentioned this issue Oct 3, 2022

[last-baseline] Clamp first/last baselines to border-box... web-platform-tests/wpt#36228

Merged

fantasai added a commit that referenced this issue Oct 3, 2022

[css-align-3] Make baseline clamping sentence easier to read. #7660

518fa4c

fantasai closed this as completed Oct 3, 2022

fantasai removed the Needs Edits label Oct 3, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Not clamping baseline position when scrollable overflow gives weird results #7660

Not clamping baseline position when scrollable overflow gives weird results #7660

tabatkins commented Aug 29, 2022

bfgeek commented Aug 29, 2022

fantasai commented Aug 30, 2022

css-meeting-bot commented Sep 15, 2022

dholbert commented Sep 15, 2022 •

edited

Loading

fantasai commented Oct 3, 2022

Not clamping baseline position when scrollable overflow gives weird results #7660

Not clamping baseline position when scrollable overflow gives weird results #7660

Comments

tabatkins commented Aug 29, 2022

bfgeek commented Aug 29, 2022

fantasai commented Aug 30, 2022

css-meeting-bot commented Sep 15, 2022

dholbert commented Sep 15, 2022 • edited Loading

fantasai commented Oct 3, 2022

dholbert commented Sep 15, 2022 •

edited

Loading