Having issues with object-fit: cover not functioning properly in Safari browser

Encountering a browser support issue at the moment.

Everything is functioning as expected on Firefox and Chrome, but Safari is causing problems with images. Currently, the image size is set using "object-fit: cover" and working properly on Chrome/Firefox. However, Safari seems to be disregarding it and displaying the image very large. Here's a screenshot showing the intended vs. actual outcome: https://i.sstatic.net/mfP8K.jpg

Below is an HTML and CSS snippet of the code affecting 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;
    }
  }
csssafaricross-browser

Answer №1

I encountered a similar problem and discovered that by setting the min-height to be 100% instead of the height being set at 100%, it resolved the issue in Safari. I have yet to experiment with this solution on width, but it's worth a try.

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

Answer №2

I encountered a comparable problem and was able to resolve it by substituting the percentage measurement of the width (or max-width) attribute with fixed values (rem or px). Specifically, Safari struggled to compute object-fit accurately when the image element's width was specified in % or inherited auto values.

Answer №3

My situation involved an <img> nested inside a <picture> element. Safari was having difficulty with the object-fit property calculation.

Following arixtty's suggestion, changing the width percentage of the img to "initial" resolved the issue. Alternatively, using a fixed value could also work depending on your specific case.

Answer №4

I discovered a solution that worked perfectly for my situation on my iPhone. I needed to place an image inside a circular container.

.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>

Answer №5

To solve this issue, consider removing the object-fit: cover property and replacing it with the scale property. This alternative has been tested and proven effective.

.object-fit-cover-photo {
    width: 100%;
    min-height: 100%;
   /*object-fit: cover;*/
    scale : 1.2; // or whatever is most suitable for the device 
}

Additionally, use media queries to ensure that it is applied across all standard devices.

Implementing these changes should resolve the bug.<

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Styling Dynamic HTML Content in Angular: Tips and Tricks

After running this line of code, I have a generated element sub with a property of [sub]. <li [displayMode]="displayMode" template-menu-item style="cursor: pointer" [routerLink]="['/request/checkoutReview']" icon="fa-shopping-cart" name ...

htmlcssangular

Tips for incorporating animated features into a bar graph using jQuery

How can I create a dynamic animated bar graph using jQuery? I am looking to make the bar slide up from the bottom, incorporating images for both the bar and background. I have already set the positioning in CSS and now need to add animation to make the bar ...

javascriptjquerycss

What are the best ways to create a responsive login form?

After recently beginning to learn HTML and CSS, I have encountered some confusion. Take a look at this table design for screens under 500px, and then compare it to how it should appear on screens 500px or larger. I believe utilizing a media query may be t ...

htmlcssresponsive-design

Is my website broken due to Internet Explorer?

The progress on my current website project has been smooth so far, but I'm encountering an issue when testing it in Internet Explorer. Whenever I try to view it in IE, the layout breaks completely. You can check it out at . I've attempted using C ...

htmlcssinternet-explorercross-browsergoogle-chrome-frame

What is the best way to use @foreach to make the text in the final row of a table bold?

Is there a way to apply bold styling to the text in the final row using @foreach in HTML? I am looking to emphasize the total sum of each column by displaying it in bold text. While I initially considered creating a new table below the current one solely ...

htmlcssasp.net-mvc

Is it possible for the vertical borders of <span> to overlap?

When nesting multiple spans within each other and giving them borders, their horizontal borders overlap by default while their vertical borders stack. Check out a live example on JsFiddle: https://jsfiddle.net/4un9tnxy/ .html: <span><span>a& ...

css

Begin the jQuery ResponsiveSlides Slider with the final image in the <ul> list

Currently utilizing the responsiveSlides image slider from responsiveSlides on our website. This jQuery slider uses an HTML unordered list of images to slide through automatically. The issue I'm facing is that before the slider actually starts (meani ...

javascriptjqueryhtmlcss

Every time I adjust the browser height on my landing page, the elements start to overlap each other

Something strange is happening - as I shorten the height of the browser, elements on the page start to overlap. I've tried using Firebug to troubleshoot, but haven't had any luck so far. Maybe someone here can help me out! EDIT: It seems that e ...

htmlcssresponsive-design

Is there a way in CSS to enable caps lock for specific characters only?

After downloading a new font and setting font-variant: small-caps;, I noticed that my numbers appear much larger than the letters. Is there a way to apply small caps only to the letters, not the numbers? While traditionally numbers do not have a capital ...

css

Adding an input field and icon at the center using ::after

Having trouble centering an input field with an icon after it in a div. I can center the input text easily using text-align:center, but struggling to center the icon added using ::before. The search text is centered, but not the icon How can I center bot ...

htmlcss

Issues with keyboard accessibility in drop down menus

Looking to improve the keyboard accessibility of my menu bar. Swapped out all instances of :hover with :focus, but unfortunately dropdown menus are still not accessible via keyboard. Does anyone have a solution for this issue? Appreciate any help! ...

htmlcssaccessibility

What is the best way to remove the left margin from a MuiTreeItem-group?

I'm working with the MUI tree component and I want to remove the left margin of the second layer of MuiTreeItem-group I attempted to use makeStyles to address this issue, but it didn't have the desired effect const useStyles = makeStyles(() => ...

javascriptcssreactjsmaterial-uitree

Issues with click events in the navigation menu

How can I make my menu close when clicking on other parts of my website, instead of opening? I know that I should use a click event for this, but when I implemented a click event, my menu encountered 2 unwanted problems: 1- Whenever I clicked on a menu i ...

javascriptjqueryhtmlcssmenu

In every browser except for Safari on iPad, a white X is displayed in the grey box. I'm wondering if the error lies with me or with Safari

When using Safari on my iPad, I noticed that the white X appears on the right-hand side of the black screen. Since this is the only version of Safari that I have, I am unsure if this issue is specific to iPads, Safaris, or just my device. Visit this link ...

htmlcssiosipadsafari

Enhance your inline content by adding adjacent inline blocks

My objective is to include a "Read More" link alongside a text block, which should appear next to the text without forming a new line or block. The challenge lies in the fact that the content of the text block is created using TinyMCE, resulting in various ...

css

Using JQuery's .mouseover and .mouseout methods to modify font colors on a webpage

Hi there, I'm new to JQuery and trying to experiment with some basic functionalities. I have a simple navigation menu created using an unordered list, and I want to change the font color of the currently hovered list item using JQuery. However, I&apos ...

javascriptjqueryhtmlcssfonts

Embarking on the journey of creating mobile web applications - where should you begin?

How can I begin learning to create mobile web apps? I have a keen interest in the design aspects, particularly the effects and animations that give them a native appearance. I suspect there are differences in CSS, HTML, and possibly JavaScript compared to ...

htmlcssmobile

What is the best way to incorporate a button that, when clicked, reveals two separate images on the frontend?

describe food option heredescribe juice option hereHow can I create a button using HTML, CSS, JavaScript, and Bootstrap that displays different images for food and juices when clicked? For example, clicking on "food" will display 3 different food images, w ...

javascripthtmlcssbootstrap-4bootstrap-5

The "Open in new tab" feature seems to be missing for links when using Safari on iOS

My webapp contains links structured like this: <a href="/articles/">Articles</a> I am using JavaScript to control these links within my app: $(document).on("click", 'a', function(ev) { ev.preventDefault(); ev.stopPropagat ...

javascriptioshtmlsafari

Submitted input in a text field is automatically displayed in a separate text box

Below is a snippet of HTML code from my AngularJS application <input type="text" class="input-xlarge" id="user_name" ng-model="myModel.text" name="user_name" rel="popover" data-content="Enter your first and last name." data-original-titl ...

htmlcsstwitter-bootstrapangularjsangularjs-directive