Can't find out why aspect-ratio on real apple devices works incorrectly

11 Views Asked by At

I have bug, that IPhone compresses cells of confirm number component. This component uses aspect ratio for styling and I think that IPhones convertes this values incorrectly or doesn't see it. Provided the scss code, image how it looks on IPhone and how it looks on other devices. Any ideas/solutions?

&__field {
        width: 100%;
        background-color: $color-white;
        border: 1px solid transparent;
        border-radius: 12px;
        outline: none;
        text-align: center;
        font-weight: 500;
        font-size: 16px;
        line-height: 24px;
        color: #353f47;
        aspect-ratio: 69 / 72;

        @media screen and (max-width: 1300px) {
            aspect-ratio: 38 / 40;
            border-radius: 7px;
        }

        @media screen and (max-width: 650px) {
            aspect-ratio: 45 / 47;
            border-radius: 8px;
            max-width: 45px;
        }
    }

enter image description here enter image description here

I tried to refactor it on calculated width and height, but it loses it repsonsiveness

0

There are 0 best solutions below