1179108 - Baseline-aligned flex item is mispositioned, with padding-top and "overflow: hidden"

Status: RESOLVED DUPLICATE of bug 1797982

(Core :: Layout, defect)

Description

[Daniel Holbert [:dholbert]]

STR:
 1. Load https://jsfiddle.net/xhrb0nmq/10/

EXPECTED RESULTS: Flex items should be baseline-aligned.
ACTUAL RESULTS: Flex items are not baseline-aligned.

I think we're applying the padding-top twice when calculating the baseline, or something.

This only seems to happen when the flex item has "overflow-y: hidden".

Comment 1

[Daniel Holbert [:dholbert]]

I ran into this issue via the following stackoverflow post, BTW:
https://stackoverflow.com/questions/31133145/extremely-simple-flexbox-layout-with-overflow-hidden-vertical-mis-alignment

Comment 2

[Daniel Holbert [:dholbert]]

Attachment: testcase 1

Here's a bugzilla-hosted version of the jquery testcase linked in comment 0.

Comment 3

[wsd009811]

7 years have passed, this bug still exists. Is anybody fixing it ?

Comment 4

[Daniel Holbert [:dholbert]]

No one's currently working on it (I self-assigned it but haven't gotten to it yet, though it looks like I did post a suggested workaround on the stackoverflow post).

We've got limited resources/time, and we try to direct our attention to the bugs/features where there's the most user impact, which means bugs like this one sometimes sit for quite a while (particularly if there's no reports of real-world sites that are affected).

Out of curiosity, did you post here because you happened to run up against this bug in a real website (or in some HTML/CSS that you were writing)? If so, that would be useful to know for prioritization, and it'd be good to know what site(s) are affected.

Comment 5

[wsd009811]

(In reply to Daniel Holbert [:dholbert] from comment #4)

No one's currently working on it (I self-assigned it but haven't gotten to it yet, though it looks like I did post a suggested workaround on the stackoverflow post).

We've got limited resources/time, and we try to direct our attention to the bugs/features where there's the most user impact, which means bugs like this one sometimes sit for quite a while (particularly if there's no reports of real-world sites that are affected).

Out of curiosity, did you post here because you happened to run up against this bug in a real website (or in some HTML/CSS that you were writing)? If so, that would be useful to know for prioritization, and it'd be good to know what site(s) are affected.

Yes, this bug has happened in my web app. But I'm so sorry that it is in developing, and it hasn't been published. So I can't show you the real effect.

Comment 6

[Frank Griffith Jr]

Daniel, is this bug still valid following the baseline work that DShin completed?

Comment 7

[Daniel Holbert [:dholbert]]

(late-breaking response, sorry. :))

This was indeed fixed by some work that dshin did, back in bug 1797982. Duping.

Details:
Nightly 2022-10-30 renders the jsfiddle (from comment 0) with the second item oddly shifted upwards.
Nightly 2022-10-31 renders the jsfiddle with the second item baseline aligned with the first item, as-expected, matching Chrome. (So does current Nightly.)

The fix pushlog for those builds is https://hg.mozilla.org/mozilla-central/pushloghtml?fromchange=2fe5fe82b2f89d3f13d58c9d331deeb6175ba856&tochange=2db9822e6dd36ebcb94adbfa54031b471988fa1e which includes bug 1797982, whose bug description sounds the same as this one, basically.