css - 网格模板行 : auto bug in safari

Question

我现在正在学习 CSS Grid，在 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>

这是结果在 Safari 中的样子:

这是结果在 Chrome 中的样子:

为了让它工作，我添加了 grid-template-columns: 100%; 到网格元素，但在本指南中，由 Mozila我们有以下说明:

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

那么修复 grid-template-columns: 100%; 是错误的，还是 Safari 中的错误？

Answer 1

奇怪的是，问题出在所使用的图像上。实际分辨率为1200x800。然而，我们正在检查的屏幕 (MAC) 具有更高的分辨率，导致图像拉伸(stretch)其高度(大约 1000 像素)。

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

您会发现缩小屏幕时不会出现此问题，因为此时图像不会拉伸(stretch)。此外，这也是我们在 iPhone 中看不到该问题的原因。

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

希望这对您有所帮助。