3

In this example the "SQUARE" image is 225x225. When its height is scaled to fit the yellow flex container, Chrome maintains its aspect ratio but Safari does not. (Codepen)

Is there a (pure CSS) way to make it work in Safari? (The image size must continue to depend on its parent's height.)

Correct (Chrome):

A blue square and a yellow rect bordered in green; the yellow rect contains two square images where is written "SQUARE" in it.

Incorrect (Safari):

Now the blue part is squished to a thin vertical rectangle and the "SQUARE" images have a 3x1 ratio

#green {
  display: flex;
  height: 200px;
  width: 300px;
  padding: 20px;
  background: green;
}

#blue {
  flex-grow: 1;
  background: blue;
}

#yellow {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 20px;
  background: yellow;
}

img {
  height: 45%;
}
<div id="green">
  <div id="blue"></div>
  <div id="yellow">
    <img src="https://drive.google.com/uc?export=view&id=1SrFS5yT4nJZgzVgWzFYtyjHLeqsyJLtF"/>
    <img src="https://drive.google.com/uc?export=view&id=1SrFS5yT4nJZgzVgWzFYtyjHLeqsyJLtF"/>
  </div>
</div>

These ideas didn't work: aspect-ratio: 1 / 1, object-fit: scale-down (from this question); align-items: flex-start, object-fit: contain (from this question).

Kaiido
  • 123,334
  • 13
  • 219
  • 285
Rick Mohr
  • 1,821
  • 1
  • 19
  • 22
  • FWIW, my FF agrees with Safari here. – Kaiido Jul 08 '21 at 03:49
  • 1
    Ran a bisect against Chrome, and that sounds like a regression (from v90). I suspect [this CL](https://chromium.googlesource.com/chromium/src/+/5966576cd7ad7c293dbbd62aa679a5c8c6920adb) is the culprit, bisect did point to [this log](https://chromium.googlesource.com/chromium/src/+log/8071761dbfc0f82827c27d9d2a7a68daafa6dfd5..e2dce4d9cd32b13983248d735acedd38ae94dbfb). That change doesn't seem intentional, but I'm not an expert in that area. Also, that doesn't help you get that "buggy" behavior everywhere, sorry. – Kaiido Jul 08 '21 at 04:16
  • @Kaiido, thanks for that. Maybe you're right that the Safari behavior is "as intended". But this seems like a straightforward desirable layout -- how to achieve? Maybe it will have to be JavaScript. – Rick Mohr Jul 08 '21 at 13:17
  • I've the same problem in a project with a masonry on safari, did you find a way to fix it for safari? @RickMohr – Prokyon Jan 19 '22 at 09:28

1 Answers1

0

Perhaps not a solution for everyone, but I re-did my layout with grid instead of flexbox and the aspect-ratio didn't change in Safari!

belbo
  • 1
  • 1