csssafaricross-browser

Object-fit: cover not working correctly on Safari

having an issue with browser support right now.

I have it working as hoped for Firefox and Chrome, however on safari I am having issues with images. Currently, the image is set using "object-fit: cover" and has the intended effect on Chrome/firefox. But for safari, it seems to ignore it and the image is very large. Here is a screenshot. The left is the intended the right is the actual outcome. enter image description here

Here is an html and css snippet of my code effecting this row/column.

  <div class="feature-image">
    <img class="img-1" src="@/assets/preview-images/feature 1.png" alt="">
  </div>

  .feature-image {
    width: 50%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    img {
      width: 100%;
      -o-object-fit: cover;
      object-fit: cover;
    }
    .img-2 {
      max-width: 320px;
    }
  }
Solution

  • I had the same issue. I found that setting a min-height of % 100% instead of a height of 100% solved it in Safari. I haven't tested it on width but it might work for you.

    .object-fit-cover-photo {
    width: 100%;
    min-height: 100%;
    object-fit: cover;
}