Bug 300476

Summary:

Image aspect ratio not preserved when height and width 100% are specified yet there is no parent with a width

Product:

WebKit

Reporter:

Rob Snow <rsnow>

Component:

Layout and Rendering

Assignee:

alan <zalan>

Status:

RESOLVED FIXED

Severity:

Normal

CC:

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

Priority:

Keywords:

InRadar

Version:

WebKit Nightly Build

Hardware:

Unspecified

OS:

Unspecified

Attachments:

Description	Flags
rendering in safari, firefox, chrome	none
Patch	none
Patch	ews-feeder: commit-queue-
Patch	koivisto: review+, ews-feeder: commit-queue-
[fast-cq]Patch	none

Rob Snow

Reported 2025-10-09 17:24:08 PDT

This behaviour is different in Safari compared to FireFox and Chrome. In both of those browsers, the aspect ratio is maintained in this case. In Safari, it is lost. https://jsfiddle.net/7d5b460p/14/

Attachments
rendering in safari, firefox, chrome (372.87 KB, image/png) 2025-10-09 18:24 PDT, Karl Dubost	no flags	Details
Patch (14.98 KB, patch) 2026-05-09 14:06 PDT, alan	no flags	Details Formatted Diff Diff
Patch (58.55 KB, patch) 2026-05-09 19:08 PDT, alan	ews-feeder: commit-queue-	Details Formatted Diff Diff
Patch (63.83 KB, patch) 2026-05-10 06:44 PDT, alan	koivisto: review+ ews-feeder: commit-queue-	Details Formatted Diff Diff
[fast-cq]Patch (18.74 KB, patch) 2026-05-10 19:36 PDT, alan	no flags	Details Formatted Diff Diff
Show Obsolete (3) View All Add attachment proposed patch, testcase, etc.

Karl Dubost

Comment 1 2025-10-09 18:24:30 PDT

Created attachment 477041 [details] rendering in safari, firefox, chrome Thanks for the report. indeed. we can see a square for Firefox and Chrome and not for Safari.

Karl Dubost

Comment 2 2025-10-09 18:29:21 PDT

It reproduces without the ` flex-shrink: 0;` too.

Karl Dubost

Comment 3 2025-10-09 18:38:35 PDT

Safari `.img-container`: 2 x 160 px (because of the border-size) `img`: 0 x 158 px Firefox `.img-container`: 212.667 x 160 px `img`: 210.667 x 158 px Chrome `.img-container`: 212.656 x 160 px `img`: 210.656 x 158 px For Safari the issue is really the image element having a different size than Chrome and Firefox.

Radar WebKit Bug Importer

Comment 4 2025-10-10 09:09:30 PDT

<rdar://problem/162373271>

alan

Comment 5 2026-05-09 14:06:04 PDT

Created attachment 479548 [details] Patch

alan

Comment 6 2026-05-09 19:08:05 PDT

Created attachment 479567 [details] Patch

alan

Comment 7 2026-05-10 06:44:02 PDT

Created attachment 479574 [details] Patch

Antti Koivisto

Comment 8 2026-05-10 10:13:25 PDT

Comment on attachment 479574 [details] Patch View in context: https://bugs.webkit.org/attachment.cgi?id=479574&action=review > COMMIT_MESSAGE:7 > +EWS (PR with dependencies). I don't know what this commit message means.

alan

Comment 9 2026-05-10 19:36:37 PDT

Created attachment 479584 [details] [fast-cq]Patch

EWS

Comment 10 2026-05-11 05:14:12 PDT

Committed 313003@main (d6461def5485): <https://commits.webkit.org/313003@main> All reviewed patches have been landed. Closing bug and clearing flags on attachment 479584 [details].

Note You need to log in before you can comment on or make changes to this bug.