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;
}
}
I tried to refactor it on calculated width and height, but it loses it repsonsiveness