Bug 306258
| Summary: | `height: 100%` has wrong calculation for img as grid cell nested inside flexbox | ||
|---|---|---|---|
| Product: | WebKit | Reporter: | Oliver Joseph Ash <oliverjash> |
| Component: | Layout and Rendering | Assignee: | Sammy Gill <sgill26> |
| Status: | RESOLVED FIXED | ||
| Severity: | Normal | CC: | ahmad.saleem792, bfulgham, karlcow, sgill26, simon.fraser, webkit-bug-importer, zalan |
| Priority: | P2 | Keywords: | BrowserCompat, InRadar |
| Version: | Safari 26 | ||
| Hardware: | Unspecified | ||
| OS: | Unspecified | ||
| See Also: | https://github.com/web-platform-tests/wpt/pull/59550 | ||
Oliver Joseph Ash
https://codepen.io/OliverJAsh/pen/KwMvXKW
In Chrome and Firefox the `height: 100%` on `img` is computed as the height of the grid row. ✅
However, in Safari, the `height: 100%` on `img` is computed as the height of the container. ❌
Interestingly, if you remove the parent flexbox, the `height: 100%` is computed as the height of the row. ✅
| Attachments | ||
|---|---|---|
| Add attachment proposed patch, testcase, etc. |
Ahmad Saleem
*** Chrome Canary 146.0.7651.1 (Official Build) canary-dcheck (arm64) ***
Image is not stretched in container.
*** Firefox Nightly 149 (20260124212758) ***
Image is not stretched in container.
*** WebKit ToT (306197@main) - Minibrowser ***
Image is *stretched* in container.
Radar WebKit Bug Importer
<rdar://problem/169431440>
Sammy Gill
Pull request: https://github.com/WebKit/WebKit/pull/63559
EWS
Committed 312281@main (bd1628731f5e): <https://commits.webkit.org/312281@main>
Reviewed commits have been landed. Closing PR #63559 and removing active labels.
Sammy Gill
Submitted web-platform-tests pull request: https://github.com/web-platform-tests/wpt/pull/59550