CSS - aspect-ratio: not working in Safari browser

Question

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

Answer 1

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%

---

Edit: I found this tool it helped me alot for other different aspect ratios https://ratiobuddy.com/

Answer 2

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