CSS网格行高度Safari错误 [英] CSS Grid Row Height Safari Bug

问题描述

我制作了1fr 1fr 1fr的网格模板。在中间一行，有一列内嵌图像。

在Chrome和Firefox中，图片尊重网格行的高度并适当调整。但是，在Safari 10.1.2和Safari TP 31中，看起来存在图像溢出行的组合，并且没有适当地缩放图像宽度。

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

Safari 10.1

Chrome 60

< pre class =snippet-code-css lang-css prettyprint-override> #grid {height：100vh;显示：网格; grid-template-rows：1fr 1fr 1fr;}＃thumbnailContainer {position：inherit;溢出-x：auto;溢出-y：隐藏; white-space：nowrap;} img {display：inline;身高：100％; width：auto;} header，footer {background-color：dodgerblue;}

 < div id =grid> <报头GT;页眉和LT; /报头> < 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>< / div>  

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

<解决方案

问题在于Safari无法识别 height： img 元素上的100％。

---

说明

这不是一个Safari错误。这只是对规范的不同解释。

在处理百分比高度时，一些浏览器（如Safari）遵守规范的传统解释，这需要在父级上定义高度。 b
$ b

10.5内容高度：高度
属性

< percent>

指定百分比高度。百分比是用
尊重所生成的框的包含块的高度来计算的。如果未明确指定包含块的高度（即，它取决于内容高度），并且此元素没有绝对定位，则使用的高度计算为 auto 被指定。

换句话说，只有当父级具有定义的高度时，才会识别流入元素上的百分比高度。

一些浏览器，例如Chrome和Firefox，已经超越了这种解释，现在接受flex和grid高度作为适合具有百分比高度的孩子的父亲参考。

但Safari停滞不前。这并不意味着它是错误的，无效的或错误的。

对CSS height 定义的最后实质性更新在1998年（ CSS2 ）。自那时以来，随着这么多新的CSS属性和技术的出现，这个定义已经变得过时，不清楚，并且可悲地不完整。在定义更新为现代使用之前，可以预期浏览器渲染变化。

---

解决方案

由于Safari无法识别 img 元素上的 height：100％而且你不能在父节点（ #thumbnailContainer ）上指定高度，因为该高度由 grid-template-rows定义：1fr



通过制作 #thumbnailContainer a flex容器，您可以使用flex属性来定义图像的大小（flex项目）。

  #grid {height：100vh;显示：网格; grid-template-rows：1fr 1fr 1fr;}＃thumbnailContainer {display：flex;溢出-x：auto;溢出-y：隐藏;最小宽度：0; min-height：0;} img {flex：0 0 35％;最小宽度：0; object-fit：cover;} header，footer {background-color：dodgerblue;}  

 < div id =grid> <报头GT;页眉和LT; /报头> < 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无法填充flex父级的100％高度


• 为什么flex项目收缩过去的内容大小？


• 为什么flexbox中的对象不适合工作？

I've made a grid template with rows of 1fr 1fr 1fr. In the middle row, there are a list of inline images.

In Chrome and Firefox, the images respect the height of the grid row and adapt properly. However, in Safari 10.1.2 and Safari TP 31, there appears to be a combination of the images overflowing the row and not scaling the image widths appropriately.

Perhaps I'm doing something wrong? Or is this a Safari bug? And if so, is there a workaround?

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/

解决方案

Short Answer

The problem is that Safari is not recognizing the height: 100% on the img elements.

---

Explanation

This is not a Safari bug. It's just a different interpretation of the spec.

When dealing with percentage heights, some browsers (like Safari) adhere to the traditional interpretation of the spec, which requires a defined height on the parent.

10.5 Content height: the height property

<percentage>

Specifies a percentage height. The percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the used height is calculated as if auto was specified.

In other words, a percentage height on an in-flow element will be recognized only when the parent has a defined height.

Some browsers, such as Chrome and Firefox, have moved past this interpretation and now accept flex and grid heights as an adequate parent reference for a child with a percentage height.

But Safari is stuck in the past. This doesn't mean it's wrong, invalid or a bug.

The last substantive update to the CSS height definition was in 1998 (CSS2). With so many new CSS properties and technologies since that time, the definition has become obsolete, unclear and woefully incomplete. Until the definition is updated for modern use, browser rendering variations can be expected.

---

Solution

Since Safari doesn't recognize the height: 100% on the img elements, and you can't specify a height on the parent (#thumbnailContainer) because that height is defined by grid-template-rows: 1fr on the top-level container, you can try using flexbox.

By making #thumbnailContainer a flex container, you can define the size of the images (flex items) using flex properties.

#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

---

More information

• Working with the CSS height property and percentage values
• Chrome / Safari not filling 100% height of flex parent
• Why doesn't flex item shrink past content size?
• Why isn't object-fit working in flexbox?

这篇关于CSS网格行高度Safari错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！