Object-fit: cover not working correctly on Safari

Question

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.

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;
    }
  }

Potvaliant

for me, adding a 1 px black border fixed an issue with object-fit: cover not working properly in full-screen mode 🙁 – Kernan

Answer 1

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;
}

Blowing

I had this same issue in Safari. I found setting min-height: 100vh worked, whereas min-height: 100% did not. But that is probably just for my use case. – Bloody

Safari is the new IE – Schaffner

minHeight and minWidth added both worked for me – Rohn

Answer 2

I had a similar issue and managed to fix it by replacing percentage value of the width (or max-width) property with fixed (rem or px) values. In my case, Safari failed to calculate object-fit correctly when the img element's width was in % or inherited auto values.

Sulphurbottom

Answer 3

I had an issue when my avatar image was cropped on the bottom because of "object-fit: cover" on Safari 17.3.

I fixed it by adding "scale: 1.01;" to the image class.

Abbevillian

Answer 4

In my case there was an <img> inside of a <picture> tag. And safari was failing to calculate object-fit property.

So as arixtty mentioned - replacing percentage value of the width(for img) with "initial" value have helped. Or you can use fixed value in your case instead

Warnock

Answer 5

this has worked for my case on Iphone, I needed the arbitrary image to fill into a round circle.

.parent {
        aspect-ratio: 1 / 1;
        border-radius: 50%;
        width: 80%;
        overflow: hidden;
        display: flex;
        justify-content: center;
        align-items: center;
        border: 8px solid var(--col-base-orange);
    }

    .parent img {
        width: 100%;
        height: 100%;
        max-width: none;
        max-height: none;
        min-height: 100%;
        min-width: 100%;
        object-fit: cover;
        flex: 1;
    }

<div class="parent">
 <img src="https://i.imgur.com/j1sDrGv.jpeg" />
</div>

Polychrome

Answer 6

Well The Easiest Workaround is to Simply remove object-fit: cover and add it using scale . Its been tested and it works great

.object-fit-cover-photo {
    width: 100%;
    min-height: 100%;
   /*object-fit: cover;*/
    scale : 1.2; // or whasoever fits best for the device 
}

Also add it using media queries to ensure that its added to all standard devices .

That would basically fix this bug .

Sawfish

This wont cover the same benefits of object-fit:cover though. the scale value would vary depending on the orientation of device, and various other variables effecting the ratio of the container. – Soileau