web-dev-qa-db-fra.com

Bogue Safari de hauteur de ligne de grille CSS

J'ai créé un modèle de grille avec des rangées de 1fr 1fr 1fr. Dans la rangée du milieu, il y a une liste d'images en ligne.

Dans Chrome et Firefox, les images respectent la hauteur de la ligne de la grille et s'adaptent correctement. Cependant, dans Safari 10.1.2 et Safari TP 31, il semble y avoir une combinaison des images débordant le ligne et ne pas mettre à l'échelle les largeurs d'image de manière appropriée.

Peut-être que je fais quelque chose de mal? Ou est-ce un bug Safari? Et si oui, existe-t-il une solution?

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

Réponse courte

Le problème est que Safari ne reconnaît pas le height: 100% sur les éléments img.

Explication

Ce n'est pas un bug Safari. C'est juste une interprétation différente de la spécification.

Lorsqu'il s'agit de hauteurs en pourcentage, certains navigateurs (comme Safari) adhèrent à l'interprétation traditionnelle de la spécification, qui nécessite une hauteur définie sur le parent.

10.5 Hauteur du contenu: la propriété height

<percentage>

Spécifie un pourcentage de hauteur. Le pourcentage est calculé par rapport à la hauteur du bloc contenant la boîte générée. Si la hauteur du bloc conteneur n'est pas spécifiée explicitement (c'est-à-dire qu'elle dépend de la hauteur du contenu) et que cet élément n'est pas positionné de manière absolue, la hauteur utilisée est calculée comme si auto était spécifié.

En d'autres termes, un pourcentage de hauteur sur un élément entrant ne sera reconnu que lorsque le parent a une hauteur définie.

Certains navigateurs, tels que Chrome et Firefox, ont dépassé cette interprétation et acceptent désormais les hauteurs de flexion et de grille comme référence parentale adéquate pour un enfant avec un pourcentage de hauteur.

Mais Safari est coincé dans le passé. Cela ne signifie pas que c'est faux, invalide ou un bug.

La dernière mise à jour substantielle de la définition CSS height date de 1998 ( CSS2 ). Avec autant de nouvelles propriétés et technologies CSS depuis ce temps, la définition est devenue obsolète, peu claire et malheureusement incomplète. Jusqu'à ce que la définition soit mise à jour pour une utilisation moderne, des variations de rendu du navigateur peuvent être attendues.

Solution

Étant donné que Safari ne reconnaît pas le height: 100% sur les éléments img, et vous ne pouvez pas spécifier de hauteur sur le parent (#thumbnailContainer) car cette hauteur est définie par grid-template-rows: 1fr sur le conteneur de niveau supérieur, vous pouvez essayer d'utiliser flexbox.

En faisant #thumbnailContainer un conteneur flex, vous pouvez définir la taille des images (éléments flex) en utilisant les propriétés 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

Plus d'information

18
Michael_B