html looks weird in iOS Safari

Question

i created my own site but this looks so weird in iOS Safari and i dont know why

here is an html of my page

:root {
    --pixel: 0.322222222px;
}

.signs-block {
    height: calc(var(--pixel) * 53);
    display: flex;
    display: -webkit-flex;
}

.sign {
    border: solid 3px blue;
    margin-left: calc(var(--pixel) * 50);
}

.sign:first-of-type {
    margin-left: 0;
}

.squircle-content {
    position: absolute;
    width: 100%;
    display: flex;
    display: -webkit-flex;
    align-items: center;
}

.container {
    display: flex;
    display: -webkit-flex;
}

.space-between {
    justify-content: space-between;
    -webkit-justify-content: space-between;
}

.avatar {
    border-radius: 100%;
    width: calc(var(--pixel) * 159);
}

.margin-left-30 {
    margin-left: calc(var(--pixel) * 30);
}

.margin-left-47 {
    margin-left: calc(var(--pixel) * 47);
}

.text-50-medium {
    font-size: calc(var(--pixel) * 50);
    font-weight: 500;
}

<div class="squircle-content space-between">
        <div class="container" style="border: solid 3px red;">
            <img src="https://i.imgur.com/EmdfZR8.png" alt="avatar" class="avatar margin-left-30">
            <span class="text-50-medium margin-left-47">Добрый день, <br> nick</span>
        </div>
        <div class="signs-block margin-right-95" style="border: solid 3px black;">
            <img src="https://i.imgur.com/1kqmH74.png" alt="search" class="sign">
            <img src="https://i.imgur.com/lJg7ZyC.png" alt="favourite" class="sign">
            <img src="https://i.imgur.com/kaAOx9b.png" alt="cart" class="sign">
        </div>
    </div>

so it looks right in windows Chrome and android: windows but in Safari it looks like this: iOS

what could be the reason of this? P.S: i tried to use "width: fit-content;" so it doesn't help

Answer 1

Different browsers differently render CSS so my guess is that Safari doesn't support the CSS properties which you used to achieve your effect on Windows. Try adding float: right; to your .signs-block. As far as I am aware, this is the universal CSS property which should work on all browsers.

This here article lists all browsers which support the CSS float: right; property:

https://www.w3schools.com/cssref/pr_class_float.php