Bug 267625

Summary: Box sizing with aspect-ratio does not take into border into account
Product: WebKit Reporter: Jon Lee <jonlee554>
Component: Layout and RenderingAssignee: Nobody <webkit-unassigned>
Status: NEW ---    
Severity: Normal CC: bfulgham, karlcow, sgill26, simon.fraser, webkit-bug-importer, webkit, zalan
Priority: P2 Keywords: BrowserCompat, InRadar
Version: Safari 16   
Hardware: Unspecified   
OS: Unspecified   
See Also: https://bugs.webkit.org/show_bug.cgi?id=244697
https://bugs.webkit.org/show_bug.cgi?id=272527
Bug Depends on:    
Bug Blocks: 47738    
Attachments:
Description Flags
rendering in safari, firefox, chrome none

Description Jon Lee 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.
Comment 1 Karl Dubost 2024-01-18 21:57:10 PST
Jon, Thanks for the report
it looks like a duplicate of Bug 244697
Comment 2 Radar WebKit Bug Importer 2024-01-24 00:01:19 PST
<rdar://problem/121500004>
Comment 3 silverwind 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.
Comment 4 Karl Dubost 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
Comment 5 silverwind 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.