grid-template-rows：safari中的自动错误

Question

我正在学习CSS Grid，并在safari中遇到'bug'

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>

这是Safari中的结果：

这是Chrome中的结果：

为了使其工作，我已将grid-template-columns: 100%;添加到网格元素，但在本指南中，Mozila我们有以下注释：

注意：auto轨道尺寸（并且只有auto轨道尺寸）可以通过align-content和justify-content属性拉伸。

修复grid-template-columns: 100%;错误，或者它是Safari中的错误？

Answer 1

奇怪的是，问题在于使用的图像。其实际分辨率为1200x800。但是，我们检查的屏幕（MAC）具有更高的分辨率，导致图像拉伸其高度（大约为1000px）。

在Safari中，似乎1fr是根据实际图像大小而不是拉伸的大小来计算的，导致1fr被计算为800px。

缩小屏幕时，您可以发现问题没有出现，因为图像不会拉伸。此外，这就是我们没有在iPhone中看到问题的原因。

我们可以手动将高度设置为max-height的800px，以避免拉伸作为此问题的解决方法。或者grid-template-columns: 100%;的解决方案也很好。

希望这可以帮助。