Question 421011 in CSS Question posted in
Some basic documentation can be found here.

Css – Difference in nested grid element size in Chromium vs Safari

This specific combination of a nested grid item with justify-items: center on the grid and both object-fit: contain and width: 100% on the child produce different child width in Chromium/Firefox vs Safari.

My questions are: (1) Which of them is correct by the spec. (2) Looking for any bug-tracking issues reporting the behavior difference.

#grid {
  display: grid;
  justify-items: center;
}

img {
  width: 100%;
  height: 300px;
  object-fit: contain;
  background: red;
}
<div id="grid">
  <div id="container">
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/bd/Test.svg/620px-Test.svg.png">
  </div>
</div>

try: https://codepen.io/eyaler/pen/qEWVwjy

Chromium on the left vs Playwright/Webkit on the right:
enter image description here

Tags:

2

Answers


  1. 0

    There are rendering issues between browsers, especially when it comes to newer technologies (like Grid). In this case, you should be able to achieve cross-browser consistency by simply removing the width: 100%.

    #grid {
  display: grid;
  justify-items: center;
}

img {
  /* width: 100%; */
  height: 300px;
  /* object-fit: contain; */
  background: red;
}
    <div id="grid">
  <div id="container">
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/bd/Test.svg/620px-Test.svg.png">
  </div>
</div>
    Login or Signup to reply.
  2. 0

    I created some additional scenarios to test various values of justify-items as well as various container setups across the two browsers.

    body {
  margin: 1em;
}

section {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1em;
  align-items: end;
}

section > * {
  background: pink;
  border-top-right-radius: 2em;
}

section p {
  margin: 0.5em 1em 1em;
}

section p:first-letter {
  font-size: 2em;
  font-weight: bold;
}

.grid {
  display: grid;
  border: 5px solid black;
}

.g1, .g2, .g3 {
  justify-items: center;
}

.g4, .g5, .g6 {
  justify-items: normal;
}

.g7, .g8, .g9 {
  justify-items: start;
}

:is(.g2, .g5, .g8) .container {
  width: 100%;
}

img {
  width: 100%;
  height: 100px;
  object-fit: contain;
  background: red;
  display: block;
}
    <section>

<div>
  <p>1 &nbsp; original scenario<br>justify-items: center<br>container width: auto</p>
  <div class="grid g1">
    <div class="container">
      <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/bd/Test.svg/620px-Test.svg.png">
    </div>
  </div>
</div>

<div>
  <p>2<br>justify-items: center<br>container width: 100%</p>
  <div class="grid g2">
    <div class="container">
      <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/bd/Test.svg/620px-Test.svg.png">
    </div>
  </div>
</div>

<div>
  <p>3<br>justify-items: center<br>container removed</p>
  <div class="grid g3">
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/bd/Test.svg/620px-Test.svg.png">
  </div>
</div>

<div>
  <p>4<br>justify-items: normal<br>container width: auto</p>
  <div class="grid g4">
    <div class="container">
      <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/bd/Test.svg/620px-Test.svg.png">
    </div>
  </div>
</div>

<div>
  <p>5<br>justify-items: normal<br>container width: 100%</p>
  <div class="grid g5">
    <div class="container">
      <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/bd/Test.svg/620px-Test.svg.png">
    </div>
  </div>
</div>

<div>
  <p>6<br>justify-items: normal<br>container removed</p>
  <div class="grid g6">
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/bd/Test.svg/620px-Test.svg.png">
  </div>
</div>

<div>
  <p>7<br>justify-items: start<br>container width: auto</p>
  <div class="grid g7">
    <div class="container">
      <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/bd/Test.svg/620px-Test.svg.png">
    </div>
  </div>
</div>

<div>
  <p>8<br>justify-items: start<br>container width: 100%</p>
  <div class="grid g8">
    <div class="container">
      <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/bd/Test.svg/620px-Test.svg.png">
    </div>
  </div>
</div>

<div>
  <p>9<br>justify-items: start<br>container removed</p>
  <div class="grid g9">
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/bd/Test.svg/620px-Test.svg.png">
  </div>
</div>

</section>

    Here are the results:

    enter image description here

    My guess is that Chrome’s rendering is correct. If the .container is styled with width: auto (the default value) then:

    • its size is determined by its contents
    • the image style of width: 100% has no effect
    • the image is scaled as per the specified fixed height

    The .container is therefore only as wide as the image inside it, except in scenario 4 where justify-items: normal behaves as stretch (for elements without an aspect ratio), so .container grows to fill the grid column.

    My guess is therefore that Webkit is the rendering engine with the bug, so I recommend that you lodge a report there. If the folks there disagree, they will provide their rationale in their response to the report.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search