CSS - aspect-ratio: not working in Safari browser

user_11390952 0
Viewed 8313

.test {
    width: 20%;
    background: red;
    aspect-ratio: 1/1;
}
<div class="test"></div>

aspect-ratio: 1/1; It works fine in other browsers except safari. But this code doesn't work in Safari. I was using macOS 11.2. I have now updated to macOS 11.5.2. As far as I know it supports safari but I could not fully understand the problem. Thank you from now. If there is any missing information, I will add it if you let me know.

safari css
3 Answers

aspect-ratio as a css property is not supported in Safari prior to Safari 15, but the use of media queries with aspect-ratio @media: (aspect-ratio: 1/1) is supported: https://caniuse.com/?search=aspect-ratio

user_115803500

You can add a fallback for that, this padding hack works for me 

.test {
    aspect-ratio: 16/9;
    // Fallback
    @supports not (aspect-ratio: 16 / 9) {
    &::before {
      float: left;
      padding-top: 56.25%;
      content: "";
    }

    &::after {
      display: block;
      content: "";
      clear: both;
    }
  }
}

Other aspects ratio:

  • 1:1 aspect ratio = 1 / 1 = 1 = padding-top: 100%
  • 4:3 aspect ratio = 3 / 4 = 0.75 = padding-top: 75%
  • 3:2 aspect ratio = 2 / 3 = 0.66666 = padding-top: 66.67%
  • 16:9 aspect ratio = 9 / 16 = 0.5625 = padding-top: 56.25%
user_167336050

Cheeky SCSS mixin ..

@mixin aspect($width: 16, $height: 9) {
    aspect-ratio: $width / $height;

    @supports not (aspect-ratio: $width / $height) {
        &::before {
            content: '';
            float: left;
            padding-top: calc((#{$height} / #{$width}) * 100%);
        }

        &::after {
            content: '';
            display: block;
            clear: both;
        }
    }
}
user_33275370
Related