Closed Bug 1227140 Opened 6 years ago Closed 5 years ago
[css-grid] image with "max-width: 100%" is not scaled down to fit inside its grid item
User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/46.0.2490.86 Safari/537.36 Steps to reproduce: The image must be scaled down to a proper size.
Component: Untriaged → Layout
Priority: -- → P1
Product: Firefox → Core
Version: 45 Branch → Trunk
Looks like this relies on the img's "max-width: 100%" styling, in Chrome, to get the image to be the right size. (If you remove that, Chrome behaves like Firefox.) That suggests this is a version of bug 823483. (We've seen similar bugs for flexbox, too -- e.g. bug 1139931.)
I updated the test case, using min-width: 0 in grid item to repair the differences between Chrome and Firefox. But they still have a big difference, Chrome more in line with expectations.
Attachment #8690823 - Attachment is obsolete: true
It looks like https://bugzilla.mozilla.org/show_bug.cgi?id=1227285
What about Demo1?
Probably best to file a new bug for Demo1. (I don't think it boils down to bug 823483 like the original testcase here does, though it might.)
Status: UNCONFIRMED → NEW
Ever confirmed: true
Summary: [css-grid]image is not scaled down to a proper size → [css-grid] image with "max-width: 100%" is not scaled down to fit inside its grid item
The max-width part has been fixed by the resolution of bug 823483 For https://bug1227140.bmoattachments.org/attachment.cgi?id=8691197 There's a difference of rendering but different of why this issue has been raised. See attachment. Closing as fixed.
Status: NEW → RESOLVED
Closed: 5 years ago
Resolution: --- → FIXED
You need to log in before you can comment on or make changes to this bug.