1227140 - [css-grid] image with "max-width: 100%" is not scaled down to fit inside its grid item

Status: RESOLVED FIXED

(Core :: Layout, defect, P1)

Description

[yisibl]

Attachment: TestCase.html

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.

Comment 1

[yisibl]

Attachment: Snapshot.png

Comment 2

[Daniel Holbert [:dholbert]]

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.)

Comment 3

[yisibl]

Attachment: TestCaseNew.html

Comment 4

[yisibl]

Attachment: SnapshotNew.png

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.

Comment 5

[yisibl]

It looks like https://bugzilla.mozilla.org/show_bug.cgi?id=1227285

Comment 6

[Daniel Holbert [:dholbert]]

Yup, "Demo2" in comment 3's testcase is bug 1227285.

Comment 7

[yisibl]

What about Demo1?

Comment 8

[Daniel Holbert [:dholbert]]

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.)

Comment 9

[Karl Dubost💡 :karlcow]

Attachment: second-test-firefox-opera.png

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.