Bug 258189

Summary:	Images with aspect ratio in a grid container makes grid cell overflow and render wrong
Product:	WebKit	Reporter:	Rob de Kort <rob>
Component:	Layout and Rendering	Assignee:	Sammy Gill <sgill26>
Status:	NEW ---
Severity:	Normal	CC:	ahmad.saleem792, bfulgham, simon.fraser, webkit-bug-importer, zalan
Priority:	P2	Keywords:	InRadar
Version:	Safari 16
Hardware:	All
OS:	macOS 13

Description Rob de Kort 2023-06-16 00:08:13 PDT

When using images with aspect ratio in a css grid container you get very weird rendering results.

Example:
https://play.tailwindcss.com/6SY8yyS9PI

Workarounds I found:
* Use `align-items: flex-start` on the grid container, but this is not always desirable.
* Put the aspect ratio on the actual img tag and not on the figure: https://play.tailwindcss.com/N7Ygj92sJg

Comment 1 Radar WebKit Bug Importer 2023-06-16 15:38:56 PDT

<rdar://problem/110922039>

Comment 2 Ahmad Saleem 2024-07-25 16:10:48 PDT

Safari Technology Preview 199 is better in the below test case but it is still not same as Chrome Canary 129 and Firefox Nightly 130.

Safari has images more 'squarish' rather than elongated like other browsers.