Error de Safari de altura de fila de cuadrícula CSS

Hice una plantilla de cuadrícula con filas de 1fr 1fr 1fr. En la fila central, hay una lista de imágenes en línea.

En Chrome y Firefox, las imágenes respetan la altura de la fila de la cuadrícula y se adaptan correctamente. Sin embargo, en Safari 10.1.2 y Safari TP 31, parece haber una combinación de las imágenes que desbordan la fila y no escalan los anchos de la imagen adecuadamente.

Tal vez estoy haciendo algo mal? ¿O es esto un error de Safari? Y si es así, ¿hay alguna solución?

Safari 10.1

Safari TP

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