CSS CSS inset, vw units, and Safari

[EduardZ]

Hi,

I'm having an issue getting an inset to work as expected in Safari. It's a simple svg on top of a background image.

<section class="whiteOnColor" id="header" role="banner">
  <div id="social" class="rows">
    <a href="https://www.facebook.com/#">
      <img src="/assets/Facebook.svg" alt="facebook">
    </a>
    <a href="https://www.instagram.com/#">
      <img src="/assets/Instagram.svg" alt="instagram">
    </a>
  </div>
  <img
    src="/assets/Header_logo.svg"
    alt="Logo"
  >
</section>

#header {
      background-image: url("/assets/Header_photo.webp");
      aspect-ratio: 1920/1280;

      & > img {
        //logo overlay
        position: absolute;
        inset: 30px 20vw;
        object-fit: contain;
      }
}

This works on Chrome, Edge, and Firefox but not Safari. Safari runs this svg off the right side of the screen.

 

[Craigerove]

images have intrinsic sizes, unlike a regular element like a div or whatever.
Normally when an image is rendered, the browser gets its intrinsic size of it and uses that to figure out how big it should be (since we usually change the size with CSS).

I actually wonder if Safari is following the spec closer here, because width and height are not the same as the position properties (they just often work because of how width: auto and height: auto work, which are the defaults. but those auto values are different for an image).

Anyway, all that to say we need to define the size of the image for this to work.
For the size to be correct based on the inset you gave it you could do this:

height: calc(100% - 60px);
width: calc(100% - 40vw);

That shouldn't cause any issues on other browsers either.

If you want to make it a bit easier to adjust, you could do this too, which would have the same finished result (I think, I didn't test it ):

& > img {
  //logo overlay
  position: absolute;
  inset: 0;
  margin: auto;
  height: calc(100% - 60px);
  width: calc(100% - 40vw);
  object-fit: contain;
}

We're giving it the entire space to live inside with the inset: 0, giving it a set width and height, and then using margin: auto to center it.

 

[EduardZ]

Thanks. I did figure out a similar solution and would like your opinion.

& > img {
        //logo overlay
        position: absolute;
        inset: 30px 20vw;
        width: 60vw;
      }