Bug 202470 – Inline-block elements with overflow: hidden fail to use bottom edge as baseline

• Component: CSS
• Status: RESOLVED CONFIGURATION CHANGED

[Trevor Burnham]

Created attachment 380026 [details]
Screenshot comparing behavior in Chrome/Firefox vs. Safari

Example: https://codepen.io/TrevorBurnham/pen/BaBXVZd

In Chrome and Firefox, the inline-block element with `overflow: hidden` is aligned so that its bottom margin edge is used as the baseline. While unintuitive, this behavior is consistent with the spec:

> The baseline of an 'inline-block' is the baseline of its last line box in the normal flow, unless it has either no in-flow line boxes or if its 'overflow' property has a computed value other than 'visible', in which case the baseline is the bottom margin edge.

It looks like WebKit has long been an outlier in ignoring this part of the spec (see the attached Firefox issue). However, I haven't been able to find any relevant discussion in the WebKit bug tracker.

[Radar WebKit Bug Importer]

<rdar://problem/55921594>

[Ahmad Saleem]

I took test case from Mozilla as well: https://bug491549.bmoattachments.org/attachment.cgi?id=375851

Looking into codepen and also above, all browsers (Safari 17.2, Chrome Canary 122 and Firefox Nightly 122) looks same to me in rendering.

CCing - few others to confirm that we don't have any bug.

[Trevor Burnham]

Confirmed, it looks to me like this bug has been resolved.