grid-template-rows: auto bug in safari

Question

I am learning CSS Grid right now and encounter a 'bug' in safari

Example code

html,
body {
  width: 100%;
  height: 100%;
  color: white;
  text-transform: uppercase;
  text-align: center;
  font-family: helvetica, arial;
}

.full-size img {
  width: 100%;
}

article {
  min-height: 100%;
  display: grid;
  grid-template-rows: auto 1fr auto;
  grid-template-columns: 100%;
}

header {
  background: deeppink;
  padding: 1rem;
}

main {
  background: whitesmoke;
  color: #444;
  padding: 1rem;
}

footer {
  background: purple;
  padding: 1rem;
}

* {
  margin: 0 !important;
  padding: 0 !important;
}

<article>
  <header>
    Page Header
  </header>
  <main>
    <strong contenteditable>Hi, there's not much content, yet. You can write in here to expand the container.</strong>
    <figure class="full-size">
      <img src="http://www.book-a-flat.com/magazine/wp-content/uploads/2017/05/Paris-8-appartement-toit-terrasse-piscine.jpg">
    </figure>
    <p>some text stuff...</p>
  </main>
  <footer>
    All rights reversed.
    <br>
    <small>I am always at the bottom of the page</small>
  </footer>
</article>

This is how the result looks in Safari:

This is how the result looks in Chrome:

In order to make it work, I have added grid-template-columns: 100%; to the grid element, but in this guide, by Mozila we have the following note:

Note: auto track sizes (and only auto track sizes) can be stretched by the align-content and justify-content properties.

So is the fix grid-template-columns: 100%; wrong, or is it a bug in Safari?

Answer 1

Strangely, the issue is with the image used. The actual resolution of which is 1200x800. However, the screens in which we are checking(MAC) is of a higher resolution, causing the image to stretch its height(to 1000px approx).

In Safari, seems like the 1fr is calculated based on the actual image size and not the stretched one, causing the 1fr to be computed to 800px.

You can find the issue not appearing when you shrink the screen as the image won't stretch then. Also, that's the reason why we don't see the issue in an iPhone.

We can manually set the height to a max-height of 800px to avoid it from stretching as a workaround to this issue. Or the solution of grid-template-columns: 100%; also holds good.

Hope this helps.