Flex justify-content, align-items not working on Safari or mobile browsers

Question

I have images within a container element. When the image height is less than the container height I want the image at the top of the container. When the image width is less than the container width I want the image centered.
This is how I want it to look and it works on desktop Firefox and Chrome.

However, on desktop Safari and mobile Safari, Firefox and Chrome it looks like this with the shorter image centered vertically and the narrower width image stretched to fit the container width:

#container {
  display: flex;
  flex-direction: row;
}

.mainImageContainer {
  width: 500px;
  height: 375px;
  margin: 1rem;
}

.mainImageBtn {
  background-color: rgb(231, 60, 60);
  display: -webkit-box;   /* tried this did not work */
  display: -webkit-flex;  /* tried this did not work */
  display: -moz-box;      /* tried this did not work */
  display: -ms-flexbox;   /* tried this did not work */
  display: flex;
  width: 500px;
  height: 375px;
  border: none;
  padding: 0;
  justify-content: center;
  -webkit-box-pack: start;    /* tried this did not work */
  -webkit-box-align: start;   /* tried this did not work */
  -webkit-flex-align: start;  /* tried this did not work */
  -ms-flex-align: start;      /* tried this did not work */
  -webkit-align-items: start; /* tried this did not work */
  align-items: flex-start;
}

.mainImage {
  cursor: zoom-in;
  max-width: 100%;
  max-height: 100%;
}

<div id="container">
  <div class="mainImageContainer">
    <button class="mainImageBtn">
      <img class="mainImage" src="https://eoja82.github.io/For-Sale/img/car_2.jpg" alt="car"></img>
    </button>
  </div>
  <div class="mainImageContainer">
    <button class="mainImageBtn">
      <img class="mainImage" src="https://eoja82.github.io/For-Sale/img/tumbler%20-%202.jpeg" alt="instructions"></img>
    </button>
  </div>
</div>

I read this but none of the solutions worked for me: How do I make flex box work in safari?.

I'm using the latest versions of the browsers.

Can you add in a couple of actual images to reproduce the issue? — Huangism, Sep 23 '20 at 18:40
Yea I see the issue, I guess the browser handles this part differently, but it looks like the problem is the button tag haha — Huangism, Sep 23 '20 at 19:10
Originally, I had just the img tag, but I was getting accessibility warnings from Gatsby about non-interactive elements having click events, so I wrapped the img in a button to get rid of the warning. — eoja, Sep 23 '20 at 19:35
You can use an anchor element as well and make it `role="button"` and `href=#`. Must have href or else it's a violation for accessibility — Huangism, Sep 23 '20 at 20:54

score 2 · Accepted Answer · answered Sep 23 '20 at 19:10

Safari has issues with flexbox on buttons. To work around this, wrap the contents of the button in a div and style the div instead.
Setting both axes of an image can result in the aspect ratio being ignored. Use object-fit: contain to ensure this doesn't happen.

#container {
  display: flex;
  flex-direction: row;
}

.mainImageContainer {
  width: 500px;
  height: 375px;
  margin: 1rem;
}

.mainImageBtn {
  border: none;
  padding: 0;
}

.mainImageWrapper {
  background-color: rgb(231, 60, 60);
  display: flex;
  justify-content: center;
  align-items: flex-start;
  width: 500px;
  height: 375px;
}

.mainImage {
  cursor: zoom-in;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: top center;
}

<div id="container">
  <div class="mainImageContainer">
    <button class="mainImageBtn">
      <div class="mainImageWrapper">
        <img class="mainImage" src="https://eoja82.github.io/For-Sale/img/car_2.jpg" alt="car" />
      </div>
    </button>
  </div>
  <div class="mainImageContainer">
    <button class="mainImageBtn">
      <div class="mainImageWrapper">
        <img class="mainImage" src="https://eoja82.github.io/For-Sale/img/tumbler%20-%202.jpeg" alt="instructions" />
      </div>
    </button>
  </div>
</div>

It works as intended wrapping the ```img``` in a ```div``` without using ```object-fit``` and ```object-position```. Would you still recommend using them "just in case" or leave it out if it works without it? — eoja, Sep 23 '20 at 20:17
@eoja As long as you don't try to set the width of the image you should be okay, but there's no harm in using `object-fit` as a backup. — coreyward, Sep 23 '20 at 21:13

Flex justify-content, align-items not working on Safari or mobile browsers

1 Answers1