Bug 268874 – Regression (Safari 17 vs 16.5, 261003@main): height collapsing on auto-height image when container-type set on parent

• Component: Layout and Rendering
• Status: RESOLVED FIXED

I have built a carousel which relies on a combination of grid, flex, overflow: auto, and container queries. I give this context so you'll know the overflow etc is present for a reason.

Here is a minimal example showing only one image. https://codepen.io/tremby/pen/rNRrjrQ

It's working as expected in Firefox, Chrome, Safari 16.5. Broken in Safari 17 (and Webkit 17.4 via Playwright).

Expected layout: full kitten image is visible at its intrinsic aspect ratio. Line of text to the right (usually navigation buttons) is vertically centred in the available space.

Webkit 17.4: only a small strip of the kitten is visible (same as the height of the text on the right). The rest has overflowed vertically and so is hidden. The container (.grid) has only taken the height of the text content, not also of the image. Toggling the "container-type" style off and on makes the problem disappear and appear. In my full implementation I rely on the container, however.

It also renders as expected if I move the "container-type" rule to a new parent container.

[Ahmad Saleem]

I am able to reproduce this bug on WebKit ToT (via Minibrowser - Release build - 274172@main).

[zalan]

regressed at https://commits.webkit.org/261003@main

[Radar WebKit Bug Importer]

<rdar://problem/122436169>

[Rob Buis]

Pull request: https://github.com/WebKit/WebKit/pull/24347

[EWS]

Committed 275376@main (dd25a04355e3): <https://commits.webkit.org/275376@main>

Reviewed commits have been landed. Closing PR #24347 and removing active labels.