Bug 258189 - Images with aspect ratio in a grid container makes grid cell overflow and render wrong
Summary: Images with aspect ratio in a grid container makes grid cell overflow and ren...
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: Layout and Rendering (show other bugs)
Version: Safari 16
Hardware: All macOS 13
: P2 Normal
Assignee: Sammy Gill
URL:
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2023-06-16 00:08 PDT by Rob de Kort
Modified: 2024-07-25 16:10 PDT (History)
5 users (show)

See Also:

Attachments
Add an attachment (proposed patch, testcase, etc.)

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