RESOLVED FIXED311833
height: 100% changes layout when the parent height is defined via aspect-ratio
https://bugs.webkit.org/show_bug.cgi?id=311833
Summary height: 100% changes layout when the parent height is defined via aspect-ratio
michael
Reported 2026-04-09 10:31:24 PDT
Consider this markup: ```html <div style="width: 500px; aspect-ratio: 7882 / 5257;"> <div style="height: 100%"></div> </div> ``` In Safari (both on desktop and mobile), the inner div with `height: 100%` leads to a few extra pixels added to the height of the inner and outer div. I suspect some wrong height calculation in the layout engine. See repro: https://cdn.letsken.com/repros/001-safari-height-100-percent.html
Attachments
Test reduction (420 bytes, text/html)
2026-04-09 11:13 PDT, alan
no flags
Patch (6.02 KB, patch)
2026-04-09 11:55 PDT, alan
no flags
Patch (5.78 KB, patch)
2026-04-09 12:00 PDT, alan
no flags
[fast-cq]Patch (5.77 KB, patch)
2026-04-09 13:21 PDT, alan
no flags
alan
Comment 1 2026-04-09 11:13:14 PDT
Created attachment 478980 [details] Test reduction
alan
Comment 2 2026-04-09 11:55:23 PDT
alan
Comment 3 2026-04-09 12:00:11 PDT
alan
Comment 4 2026-04-09 12:05:05 PDT
Thank you for filing this bug (and for the great test reduction)!
alan
Comment 5 2026-04-09 13:21:16 PDT
Created attachment 478983 [details] [fast-cq]Patch
EWS
Comment 6 2026-04-09 16:29:56 PDT
Committed 310877@main (a18e2d715300): <https://commits.webkit.org/310877@main> All reviewed patches have been landed. Closing bug and clearing flags on attachment 478983 [details].
Radar WebKit Bug Importer
Comment 7 2026-04-09 16:30:15 PDT
michael
Comment 8 2026-04-10 02:58:40 PDT
Thank you Alan for looking into this and providing a fix so fast!
Sammy Gill
Comment 9 2026-04-22 15:21:18 PDT
Submitted web-platform-tests pull request: https://github.com/web-platform-tests/wpt/pull/59424
Note You need to log in before you can comment on or make changes to this bug.