Why is CSS Grid row height different in Safari?

Question

I have used CSS Grid to lay out a difficult grid layout where grid items have varying heights and widths. The height of the grid rows is set to 1fr so that it is proportional to the height of the grid. Some grid items have a grid-row: span 2 or grid-row: span 3.

The grid element is absolutely positioned inside of wrapper with padding on it in order to maintain the aspect ratio.

This has all worked perfectly in Chrome and Firefox and even in IE with the help of the -ms- prefix.

In Safari, it's a different story:

However, in Safari the grid row does not seem to be calculated the same way — the height of the rows is much, much shorter in Safari than any other browser, which ruins the layout. Why is this?

Removing position absolute from the grid element doesn't change the row height. But it seems that putting height: 0 on the grid wrapper does something that makes the row height behave the same in Safari as it does in Chrome and Firefox. What's the reason behind this?

Code:

Codepen: https://codepen.io/katrina-isabelle/pen/rRqvXq

.grid-wrapper {
  position: relative;
  padding-bottom: 60%;
}

.grid {
  display: grid;
  grid-gap: 2px;
  grid-template-columns: 29% 21% 21% 29%;
  grid-auto-rows: 1fr;
  position: absolute;
  width: 100%;
  height: 100%;
}

.grid-item {
  width: 100%;
  color: #ccc;
  background: #ccc;
}
.grid-item--1 {
  grid-row: span 2;
}
.grid-item--2 {
  grid-row: span 3;
}
.grid-item--3 {
  grid-row: span 2;
}
.grid-item--4 {
  grid-row: span 3;
}
.grid-item--5 {
  grid-row: span 2;
}
.grid-item--6 {
  grid-row: span 3;
}
.grid-item--7 {
  grid-row: span 2;
}
.grid-item--8 {
  grid-row: span 2;
}
.grid-item--9 {
  grid-row: span 1;
}

<div class="grid-wrapper">
  <div class="grid">
    <div class="grid-item grid-item--1">
      Grid item
    </div>
    <div class="grid-item grid-item--2">
      Grid item
    </div>
    <div class="grid-item grid-item--3">
      Grid item
    </div>
    <div class="grid-item grid-item--4">
      Grid item
    </div>
    <div class="grid-item grid-item--5">
      Grid item
    </div>
    <div class="grid-item grid-item--6">
      Grid item
    </div>
    <div class="grid-item grid-item--7">
      Grid item
    </div>
    <div class="grid-item grid-item--8">
      Grid item
    </div>
    <div class="grid-item grid-item--9">
      Grid item
    </div>
  </div>
</div>

Answer 1

I've been having a similar issue in Safari 12+, as I was also using padding to force aspect ratios in a grid based layout. I'm not sure if this is exact same problem you were having, but the fix below works for me on your pen in Safari.

TLDR: Put display:grid on the div surrounding your grid container. Here it is in action: https://codepen.io/harrison-rood/pen/rNxXWPb

After tearing my hair out for hours on this, I decided to try placing display:grid on the wrapper around my main grid, and it worked perfectly! I have no idea why this would fix it, but my guess would be that it gives Safari some more context on the parent container and that allows height:100% to refer to the grid context instead of the parent, similar to how Chrome and Firefox handle this by default. This was so frustrating to me that I felt obligated to create a SO account just so I could post this! Hope it helps!

Answer 2

Instead of height: 100% on the grid container (.grid), use height: 100vh.

Or, if you really want to use percentages, then make sure the parent has a defined height. Some browsers still adhere to an old rule about percentage heights, namely:

An element with a percentage height must have a parent with a defined height as a reference point or the percentage height will be ignored.

More details here:

• Working with the CSS height property and percentage values
• Chrome / Safari not filling 100% height of flex parent