codepen.io - design is broken

[webcompat-bot]

URL: https://codepen.io/joeKingtheThird/pen/jKqYKX

Browser / Version: chrome Version 67.0.3396.62
Operating System: Windows 7
Tested Another Browser: Yes

Problem type: Design is broken
Description: Image in grid object-fit or grid-gap is incorrect in Chrome browser.
Steps to Reproduce:

From webcompat.com with ❤️

[softvision-oana-arbuzov]

Thanks for the report I was able to reproduce the issue.

Tested with:
Browser / Version: Chrome 67.0.3396.62
Operating System: Windows 10 Pro

Moving to Needsdiagnosis for further investigation.

[karlcow]

@foolip do you have an idea about this? It's about the implementations of grid in Chrome.

[joeKingtheThird]

If I take off auto-rows line then it seems to be the same as firefox (gif from chrome browser codepen)
https://codepen.io/joeKingtheThird/pen/pKbpPZ

[joeKingtheThird]

I've put some borders on the items in the grid. On auto-rows 200px 150px Chrome looks different to firefox. Maybe firefox does the auto-rows wrong. https://codepen.io/joeKingtheThird/pen/VdKrdq
That also has overflow:hidden on the item which helps the Chrome browser. Chrome browser seems to need overflow:hidden on this responsive image.

[joeKingtheThird]

This is the no overflow:hidden view with borders on items in grid in Chrome. Notice the images go outside the item borders - overflow:hidden on items corrects this.

[foolip]

Is there a static example that shows the difference between browsers? What is the result of the example in Chrome, Edge, Firefox and Safari?

[joeKingtheThird]

Test code https://codepen.io/joeKingtheThird/pen/ZRBzEw

This code has grid-auto-rows:200px 100px;
Firefox seems to not do the auto-rows and seems to enlarge/cover the image in the item strangely.
We have object-fit:cover; Firefox should be enlarging the image and clipping the image to fit the box/item? It looks like it just contains the image with no clipping.

update:9jun2018
Aha! Seems like the actual site codepen.io is inserting some sort of space underneath the 200x200px image. jsfiddle does this also -https://jsfiddle.net/0qbj6t34/ chrome and firefox both have space under image.

This file shows the correct no space under image - div wraps with no space
http://plnkr.co/edit/aUxXKvLLaR4nPX4jO4Uy?p=preview

[softvision-oana-arbuzov]

I've attached a screenshot with the layout on all browser.

[joeKingtheThird]

Small summary: Firefox doesn't seem to respect grid-auto-rows in this example
http://plnkr.co/edit/5uW1sXkFHelbe9qZhfOx?p=preview
Chrome seems to not crop the overflow
http://plnkr.co/edit/wDlGJ6mjsDUI3OqZDO4x?p=preview

[alijuma]

Firefox doesn't handle grid-auto-rows with multiple values: https://bugzilla.mozilla.org/show_bug.cgi?id=1392734. This is also covered by a WPT that only Firefox fails.

I'm not sure if the lack of overflow cropping issue is really a bug. For the two-argument grid-auto-rows example, Chrome / Safari / Edge don't crop the overflow. And once we switch to a one-argument version of grid-auto-rows, even Firefox doesn't crop the overflow:
http://plnkr.co/edit/Iu5WeY9CDkUUouBI1LdF?p=preview

[foolip]

@alijuma thanks for digging into this. I'll change the browser label to Firefox since they are the outlier.

[miketaylr]

(i'm going to close this as a dupe of https://bugzilla.mozilla.org/show_bug.cgi?id=1392734, thanks all!)