Bug 267625

Summary:

Box sizing with aspect-ratio does not take into border into account

Product:

WebKit

Reporter:

Jon Lee <jonlee554>

Component:

Layout and Rendering

Assignee:

Nobody <webkit-unassigned>

Status:

NEW ---

Severity:

Normal

CC:

bfulgham, karlcow, sgill26, simon.fraser, webkit-bug-importer, webkit, zalan

Priority:

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.