web-dev-qa-db-ja.com

CSSグリッドの行の高さSafariのバグ

1fr 1fr 1frの行を持つグリッドテンプレートを作成しました。中央の行には、インライン画像のリストがあります。

ChromeおよびFirefoxでは、画像はグリッド行の高さを尊重し、適切に適応します。ただし、Safari 10.1.2およびSafari TP 31では、画像がオーバーフローしているように見えます行と画像の幅を適切にスケーリングしていません。

おそらく私は何か間違ったことをしていますか？または、これはSafariのバグですか？もしそうなら、回避策はありますか？

Safari 10.1

enter image description here

Safari TP

enter image description here

Chrome 60

enter image description here

#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/

htmlcsssafaricss-grid
14
D. Walsh

短い答え

問題は、Safariがimg要素のheight: 100%を認識しないことです。

説明

これはSafariのバグではありません。これは仕様の異なる解釈にすぎません。

高さのパーセンテージを扱う場合、一部のブラウザー（Safariなど）は、親の定義された高さを必要とする、仕様の従来の解釈に準拠しています。

10.5コンテンツの高さ：heightプロパティ

<percentage>

高さのパーセンテージを指定します。パーセンテージは、生成されたボックスの包含ブロックの高さに対して計算されます。包含ブロックの高さが明示的に指定されておらず（つまり、コンテンツの高さに依存している）、この要素が絶対的に配置されていない場合、使用される高さはautoが指定されているかのように計算されます。

つまり、フロー要素の高さのパーセンテージは、親に高さが定義されている場合にのみ認識されます。

ChromeやFirefoxなどの一部のブラウザーは、この解釈を超えて、フレックスとグリッドの高さを、高さのパーセンテージを持つ子の適切な親参照として受け入れます。

しかし、Safariは過去に行き詰まっています。これは、それが間違っている、無効である、またはバグであるという意味ではありません。

CSS height定義に対する最後の実質的な更新は1998年でした（ CSS2 ）。それ以来、非常に多くの新しいCSSプロパティとテクノロジーが存在するため、定義は古くなり、不明確になり、ひどく不完全になっています。定義が最新の使用のために更新されるまで、ブラウザーのレンダリングのバリエーションが期待できます。

解決

Safariはimg要素のheight: 100%を認識せず、親（#thumbnailContainer）の高さはトップレベルのコンテナーのgrid-template-rows: 1frで定義されているため指定できません。フレックスボックス。

#thumbnailContainerをフレックスコンテナーにすることで、フレックスプロパティを使用して画像（フレックスアイテム）のサイズを定義できます。

#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

詳しくは

18
Michael_B