Search code examples
cssgoogle-chromefirefoxalignmentcss-grid

Firefox vs. Chrome discrepency in CSS Grid grid-template-column behavior on image sizes

I am working on a simple css grid resizing of an image that scales down and up when the viewport size changes. In my example the image is in the left most grid cell with text in the adjacent cell just to it's right. Interestingly the resize behavior seems to be impacted differently depending on whether or not your using chrome or firefox. In chrome, when the text pushes the bottom cell boundary past the image height the image height is changed to match thus increasing the size of the image and causing it to scale incorrectly. Whereas in firefox the image height doesn't seem to be impacted and continues to scale down correctly. What thoughts do you have about how to solve this or is this a bug in either the firefox or chrome implementation of the css grid spec? Would love some thoughts either way on how to make both browsers behave consistently here.

Here is an example I threw together on codepen that shows what I'm talking about. Just push your right browser edge to the point that the text exceeds the height of the image height and the behavior I've described becomes obvious.

https://codepen.io/bradnjones/full/WyyOyY

Here's the HTML:

<html dir="ltr" lang="en-us">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>CSS GRID Firefox / Chrome behave differently</title>
    <link rel="stylesheet" href="test.css">
  </head>
  <body>

  <div class="container">
   <img class="image" src="https://drive.google.com /uc?export=view&id=1QCw6g_h8WNfqSH_5iapODpuxNn7uciQB" alt="">
   <span class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna iqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat</span>
  </div>
  </body>
</html>

Here's the CSS:

.container {
    display: grid;
    grid-template-columns: auto auto;
    grid-template-rows: auto;
}
.image {
    grid-column: 1/2;
    grid-row: 1/2;

    object-fit: contain;
    align-self: start;
    width: 100%;
    max-height: 100%;
}

.text {
    grid-column: 2/3;
    grid-row: 1/2;
}
Solution

  • I just figured it out. It wasn't the Grid but the image css fit and alignment properties within the grid. When I changed object-fit from "cover" to "contain" and added align-self: start, chrome behaves the same as Firefox. See updates to codepen and original post for correct code.