WebKit Bugzilla
New
Browse
Search+
Log In
×
Sign in with GitHub
or
Remember my login
Create Account
·
Forgot Password
Forgotten password account recovery
NEW
258189
Images with aspect ratio in a grid container makes grid cell overflow and render wrong
https://bugs.webkit.org/show_bug.cgi?id=258189
Summary
Images with aspect ratio in a grid container makes grid cell overflow and ren...
Rob de Kort
Reported
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
Attachments
Add attachment
proposed patch, testcase, etc.
Radar WebKit Bug Importer
Comment 1
2023-06-16 15:38:56 PDT
<
rdar://problem/110922039
>
Ahmad Saleem
Comment 2
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.
Note
You need to
log in
before you can comment on or make changes to this bug.
Top of Page
Format For Printing
XML
Clone This Bug