Search code examples
csssafaricss-gridobject-fit

Why does my grid item stretch in safari when it does not in chrome and firefox

I have built a grid based photo layout for this website: https://lsiemoneit.de/digital-identity/photos.html

It works just like I expected in Firefox and Chrome but the layout breaks in Safari. I have attached a codepen that replicates and isolates that behaviour down below. Somehow in Safari the grid-row gets stretched to 100% while in Chrome and Safari it keeps the aspect ratio. Has this something to do with how Safari handles object-fit: contain?

https://codepen.io/lkssmnt-the-lessful/pen/oNBLZyZ

.photos-container {
  width: 100%;
  display: grid;
  grid-column-gap: 0.5rem;
  grid-row-gap: 2rem;
  grid-template-columns: repeat(12, 1fr);
}

.photos-container img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

Thanks for your help!

Solution

  • So apparently putting each and every image in a container of its one "fixes" that behaviour for Safari.

    More information about that behaviour can be found here: https://stackoverflow.com/a/44773109/7243348