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:

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

Adjusting the spacing between the logo and navbar in HTML code

I am struggling to understand why this issue keeps occurring: I have thoroughly checked for errors, attempted multiple solutions, yet the problem persists. Please assist body { margin: 0; padding: 0; } .logo { margin: 0; padding: 0; } ul { li ...

htmlcss

Solution to trigger CSS :hover to refresh following a transition (such as expanding a menu)

While there are existing discussions on this topic, I am presenting my query for two specific reasons: It introduces a potential alternative solution The demo code could be helpful to individuals looking to emulate a menu Following a CSS transition, the ...

javascripthtmlcssevents

Images within links appear with blue lines underneath them

Currently, I am in the process of adding links to a footer by using <img> tags with SVG images. However, I am encountering an issue where there are small blue lines under the icons. After searching online, it seems that you need to add this CSS code: ...

htmlcss

Is it possible to extract information from a string that includes HTML code within a browser using CSS selectors without actually generating the DOM elements?

I've been struggling with this basic task for hours. I can't find any libraries that work and none of the questions here address my specific issue. Here's what I need to do: The entire page's markup is in a string format. I must use ...

javascriptcssxml-parsingweb-scrapinghtml-parsing

Extract the color of an individual character

There is a code snippet in JavaScript using p5.js that functions as a video filter: const density = ' .:░▒▓█' //const density = ' .tiITesgESG' //let geist; let video let asciiDiv let playing = false let ...

javascripthtmlcssprocessingp5.js

How to prevent CSS styles from being overridden by SASS in a stylesheet

When working with a Sass file, I encountered an issue with the way styles were being output. The original style in the Sass file looked like this: .style{ width: calc(100%); } However, when compiled to its corresponding CSS file, the output was: .style{ ...

htmlcsssass

Despite using twitter bootstrap, the elements on my webpage are still overlapping one another

While implementing Twitter Bootstrap on my website, I encountered a problem where elements start overlapping if the window size is reduced. This issue does not look appealing, and I expected Twitter Bootstrap to ensure that my website is fully responsive a ...

htmlcsstwitter-bootstrap

Tips for optimizing large image files on a basic HTML, CSS, and JavaScript website to improve site speed and ensure optimal loading times

Currently, my site is live on Digital Ocean at this link: and you can find the GitHub code here: https://github.com/Omkarc284/SNsite1. While it functions well in development, issues arise when it's in production. My website contains heavy images, in ...

javascripthtmlcssuser-interfacegsap

The "html" element fails to achieve a full height when applying a 100% height setting

I am facing a height problem of 100% <!doctype html> <html> <head> <meta charset="utf-8"> <title>My Dreamweaver Website</title> <link rel="stylesheet" href="style.css"> </head> <body> <section clas ...

htmlcssdreamweaver

The functionality of the click event attached with the addEventListener is

I have a unique project where I am developing a user interface for a paper-rock-scissor game. To create the UI, I included four buttons: "Start game," "rock," "paper," and "scissor." Initially, I wrote separate code for each button, which worked perfectly ...

javascripthtmlcss

Tips for positioning a JQuery drop-down correctly

Although I am not well-versed in JQuery and struggle with CSS, I often find myself working with both. Currently, I have encountered a problem: The jquery script I am using involves clicking on an image to reveal a login box that drops down using slideTogg ...

jqueryhtmlcss

Margin and padding have the ability to increase the size of an image

Is there a technique to position the logo.png so that it appears approximately one-third of the way across the page without affecting its size? I've attempted to use padding or margin adjustments, but it seems to distort the image despite having limit ...

htmlcssimage

Most effective approach to managing state in a React UI Component

I recently delved into the world of React. I've been using it to build a design system library for my work, which consists of standalone UI components tailored for use in React applications. I've developed a specific approach to managing the sta ...

cssreactjs

Scrollable Tailwind components

I am working on creating a page layout similar to this design: here is what I want to achieve The goal is to have a simple homepage with a navbar and split screen. The challenge is to prevent the entire page from scrolling normally and enable independent ...

htmlcsstailwind-css

Modifying the colors of my navigation links is not within my control

How can I modify my CSS to change the color of the navigation links to white? Below is the code snippet: <div class="col-sm-12"> <nav class="navbar navbar-inverse"> <div class="container-fluid"> <div class="navbar-header" ...

cssnavigationbar

Internet Explorer is automatically inserting extra vertical space after the first list item in a basic menu design

Does anyone else have trouble with IE? (Or is it just me?) I'm creating a list with a background. The first and last LI elements are 5px high, while the others are 16px high. However, in IE there's a strange blank space between the first and se ...

jquerycssinternet-explorerhtml-lists

What methods can I use to make sure the right side of my React form is properly aligned for a polished appearance?

Trying to create a React component with multiple input field tables, the challenge is aligning the right side of the table correctly. The issue lies in inconsistent alignment of content within the cells leading to disruption in overall layout. Experimente ...

javascripthtmlcssreactjstypescript

Enhance the code for updating the content within a div element

I recently discovered that utilizing jQuery allows for updating the content within a div. My goal now is to enhance this script so the content remains consistent, even while loading or not. Take a look at my current code: function changeContent () { va ...

javascriptjqueryhtmlcss

Optimal techniques for leveraging CSS within Mui and Reactjs

Just starting out with mui, I'm currently working on styling CSS for mui components like so <Typography variant="h5" sx={{ fontWeight: "bold", color: "#1a759f", display: "flex", ...

javascripthtmlcssreactjsmaterial-ui

The Angular tutorial for the "Tour of Heroes" is experiencing issues with aligning the heroes' list properly

I am currently working on the Angular tour of heroes tutorial. However, I am facing an issue when trying to display the list of heroes as it appears like this: It is strange because even though the CSS/HTML/TS code from the tutorial seems correct, the lis ...

htmlcssangulartypescript