CSS Grid Row Height Safari Bug

Question

我已经制作了一个1fr 1fr 1fr行的网格模板.在中间行,有一个内嵌图像列表.

在Chrome和Firefox中,图像尊重网格行的高度并正确适应.但是,在Safari 10.1.2和Safari TP 31中,似乎存在溢出行的图像组合而未适当缩放图像宽度.

也许我做错了什么？或者这是一个Safari bug？如果是这样,有解决方法吗？

Safari 10.1

Safari TP

Chrome 60

#grid {
  height: 100vh;
  display: grid;
  grid-template-rows: 1fr 1fr 1fr;
}

#thumbnailContainer {
  position: inherit;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
}

img {
  display: inline;
  height: 100%;
  width: auto;
}

header,
footer {
  background-color: dodgerblue;
}

<div id="grid">
  <header>Header</header>
  <div id="thumbnailContainer">
    <img src="https://c2.staticflickr.com/8/7591/16903911106_b7ced9d758.jpg">
    <img src="https://c1.staticflickr.com/9/8740/16927517701_810fcb2a7c.jpg">
    <img src="https://c2.staticflickr.com/8/7637/16902583636_15138a68f0.jpg">
    <img src="https://c2.staticflickr.com/8/7614/16927530091_6755845b13.jpg">
    <img src="https://c1.staticflickr.com/9/8700/16741099010_d0ecd9df1f.jpg">
    <img src="https://c1.staticflickr.com/9/8745/16927567841_74fd20d01d.jpg">
  </div>
  <footer>Footer</footer>
</div>

https://jsfiddle.net/fqkjhh6m/1/

Answer 1

简答

问题是,Safari浏览器不能识别height: 100%的img元素.

说明

这不是Safari漏洞.这只是对规范的不同解释.

在处理百分比高度时,某些浏览器(如Safari)遵循规范的传统解释,这需要在父级上定义高度.

10.5内容高度:height 属性

<percentage>

指定百分比高度.百分比是根据生成的框的包含块的高度计算的.如果未明确指定包含块的高度(即,它取决于内容高度),并且此元素未绝对定位,则计算使用的高度,就像auto指定了一样.

换句话说,仅当父级具有已定义的高度时,才会识别流入元素的百分比高度.

某些浏览器(例如Chrome和Firefox)已超越此解释,现在接受弹性和网格高度作为具有百分比高度的子级的适当父级参考.

但Safari过去一直困扰着.这并不意味着它是错误的,无效的或错误的.

CSS height定义的最后一次实质性更新是在1998年(CSS2).自那时以来,有如此多的新CSS属性和技术,这个定义已经过时,不清楚,并且非常不完整.在为现代使用更新定义之前,可以预期浏览器呈现变化.

解

由于Safari浏览器无法识别height: 100%的img元素,你不能指定父(高度#thumbnailContainer),因为身高被定义grid-template-rows: 1fr顶级容器上,你可以尝试使用Flexbox的.

通过制作#thumbnailContainerFlex容器,您可以使用flex属性定义图像(flex项)的大小.

#grid {
  height: 100vh;
  display: grid;
  grid-template-rows: 1fr 1fr 1fr;
}
#thumbnailContainer {
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  min-width: 0;
  min-height: 0;
}
img {
  flex: 0 0 35%;
  min-width: 0;
  object-fit: cover;
}
header, footer {
  background-color: dodgerblue;
}

<div id="grid">
  <header>Header</header>
  <div id="thumbnailContainer">
    <img src="https://c2.staticflickr.com/8/7591/16903911106_b7ced9d758.jpg">
    <img src="https://c1.staticflickr.com/9/8740/16927517701_810fcb2a7c.jpg">
    <img src="https://c2.staticflickr.com/8/7637/16902583636_15138a68f0.jpg">
    <img src="https://c2.staticflickr.com/8/7614/16927530091_6755845b13.jpg">
    <img src="https://c1.staticflickr.com/9/8700/16741099010_d0ecd9df1f.jpg">
    <img src="https://c1.staticflickr.com/9/8745/16927567841_74fd20d01d.jpg">
  </div>
  <footer>Footer</footer>
</div>

的jsfiddle

更多信息

• 使用CSS height属性和百分比值
• Chrome/Safari不会填充100%高度的flex父级
• 为什么flex项目不会缩小内容大小？
• 为什么在Flexbox中没有对象适合工作？

Answer 2

不要问我为什么，但用一个简单的 div 包装网格父级解决了我的问题。

本文（https://newbedev.com/why-is-css-grid-row-height- Different-in-safari）提到：

将display:griddiv 放在网格容器周围。

我的问题只是通过用 div 包装网格容器来解决。只是想提一下另一个解决方案。我希望有人能为这里发生的事情添加解释。