0

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!

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
lkssmnt
  • 45
  • 12
  • Hi, could you describe a bit more how you expect it to behave? I wasn't sure what I expected and now think Chrome etc see what height they need to fit in the tallest (relatively) image in a given row and cut the other images to fit. While Safari just thinks you've given it the whole height of the viewport to play with. I wasn't sure [link]https://i.stack.imgur.com/CsZjh.png was exactly what I was expecting (Chrome/Edge) i.e the same image shown differently in the two rows, though I can see why now. – A Haworth Mar 28 '21 at 14:57

1 Answers1

0

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

lkssmnt
  • 45
  • 12