RESOLVED FIXED267625
Box sizing with aspect-ratio does not take into border into account 
https://bugs.webkit.org/show_bug.cgi?id=267625
Summary Box sizing with aspect-ratio does not take into border into account
Jon Lee
Reported 2024-01-17 00:00:32 PST
Load https://codepen.io/legion80/pen/ZEPeLdz The blue box should be square, but is rectangular on Safari. It's square in Chrome and Firefox.
Attachments
rendering in safari, firefox, chrome (354.37 KB, image/png)
2024-03-11 17:32 PDT, Karl Dubost 		no flags
Details
View All Add attachment proposed patch, testcase, etc.
Karl Dubost
Comment 1 2024-01-18 21:57:10 PST
Jon, Thanks for the report it looks like a duplicate of Bug 244697
Radar WebKit Bug Importer
Comment 2 2024-01-24 00:01:19 PST
<rdar://problem/121500004>
silverwind
Comment 3 2024-03-11 07:27:23 PDT
The bug only happens only in one direction with `height` and `aspect-ratio`, with `width` and `aspect-ratio` it's fine.
Karl Dubost
Comment 4 2024-03-11 17:32:57 PDT
Created attachment 470307 [details] rendering in safari, firefox, chrome tested with Safari Technology Preview 190 19619.1.5.5.2 Firefox Nightly 125.0a1 12524.3.10 Google Chrome Canary 124.0.6351.0 6351.0
silverwind
Comment 5 2024-03-14 14:43:04 PDT
Found one workaround: Setting `width: fit-content` on the element makes `aspect-ratio` work correctly. It does not seem to have negative effects from what I can tell.
Alexsander Borges Damaceno
Comment 6 2025-12-01 20:09:53 PST
Pull request: https://github.com/WebKit/WebKit/pull/54674
EWS
Comment 7 2025-12-03 07:56:16 PST
Committed 303834@main (7edec7b82096): <https://commits.webkit.org/303834@main> Reviewed commits have been landed. Closing PR #54674 and removing active labels.
Ahmad Saleem
Comment 8 2026-03-08 15:25:02 PDT
Submitted web-platform-tests pull request: https://github.com/web-platform-tests/wpt/pull/58356
Note You need to log in before you can comment on or make changes to this bug.