It also doesn't work correctly with the desktop browser. It seems that the image is rendered with a 0x0 dimension. After resizing the window (or changing the orientation in the developer tools) the dimensions are shown correctly.

It seems to be a timing issue, because sometimes it works and sometimes it doesn't. It is easier to reproduce this issue by saving the HTML file to local disk and load it from there.

See also https://stackoverflow.com/questions/50679245/chrome-67-layout-issue-when-using-grids (contains a reproducable snippet).

Tested the issue using #67.0.3396.68 and #66.0.3359.158 on Android Pixel; 8.1.0 as per the steps mentioned in original comment and could not reproduce the issue.

@ramondeklein.nl: Could you please help us with the details of your device and if possible attach a screenshot for further triaging of the issue.

Thanks!!

Please check the snippet I have posted on StackOverflow (https://stackoverflow.com/questions/50679245/chrome-67-layout-issue-when-using-grids). My Windows PC has now also upgraded to Chrome 67 and doesn't display the image. If you use Chrome 66 (or Firefox) then the image is shown.

It seemed like a mobile issue to me, but this was simply because my mobile devices already upgraded to v67 and the desktop didn't do that.

Thank you for providing more feedback. Adding the requester to the cc list.

For more details visit https://www.chromium.org/issue-tracking/autotriage - Your friendly Sheriffbot

I'm attaching a reduced test case where I can reproduce this consistently.
Doing a bisect it seems this started to fail after:
https://chromium-review.googlesource.com/980756

It's interesting to see that if you remove the "justify-content: center"
it works fine.
Note that to achieve the same effect in this particular example,
you can use "justify-items: center".

Apart from that we have a known bug related to max-height and percentages (issue #750631).

Deleted: bug.html 588 bytes

bug.html 588 bytes View Download

BTW, the issue happens on the desktop too.