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

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.
Note You need to log in before you can comment on or make changes to this bug.