CSS无法在Safari浏览器上正常工作

Question

我的页面在android设备（chrome，firefox，opera）上加载正常，但是当我在Safari上对其进行测试时，似乎某些CSS并未正确应用。我以为“ display：flex”不起作用，于是我尝试使用@webkit，但没有起作用。我不知道发生了什么。

我还将所有CSS都放在了https://autoprefixer.github.io/上，以防万一我忘记了一些Webkit，moz等 但还不够周到

https://animocreative.com.br/checkout/checkout

下面的打印具有相同的分辨率

HTML和CSS：https://pastebin.com/E7ph4rX4

<div class="col-xl-6 col-lg-5 sm-centering  col-md-6 col-12 d-xl-flex flex-column">

                <div class="produtos d-flex flex-column align-items-start justify-content-center ">

                    <div class="vip d-flex align-items-center d-lg-flex d-xl-flex align-items-xl-center d-md-flex">

                        <div class="adicionar-produtos d-xl-zlex align-items-xl-center d-lg-flex align-items-lg-center d-md-flex align-items-md-center justify-content-md-center d-flex">

                            <button id="remove-vip" class="btn-produtos"> - </button>
                            <span id="vip-added-number"> 0 </span>
                            <button id="add-vip" class="btn-produtos">+</button>

                        </div>
                        <div class="produto-tipo d-xl-flex flex-xl-column align-items position-relative ">
                            <span class="acesso"> Acesso </span>
                            <span class="tipo-produto">VIP </span>
                            <button type="button" class="btn produtos-duvida" data-container="body" data-toggle="popover" data-placement="top" data-content="Lorem ipsum dolor.">
                                <img src="./images/question-mark.png" alt="" class="qmark">
                            </button>
                        </div>

                    </div>
                    <div class="gold  d-lg-flex d-xl-flex align-items-xl-center d-md-flex d-flex align-items-center">

                        <div class="adicionar-produtos d-flex d-xl-flex align-items-xl-center d-lg-flex align-items-lg-center d-md-flex align-items-md-center justify-content-md-center">

                            <button id="remove-gold" class="btn-produtos"> - </button>
                            <span id="gold-added-number"> 0 </span>
                            <button id="add-gold" class="btn-produtos">+</button>

                        </div>
                        <div class="produto-tipo d-xl-flex flex-xl-column align-items position-relative">
                            <span class="acesso"> Acesso </span>
                            <span class="tipo-produto">Gold </span>
                            <button type="button" class="btn produtos-duvida" data-container="body" data-toggle="popover" data-placement="top" data-content="Lorem ipsum dolor simet amed.">
                                <img src="./images/question-mark.png" alt="" class="qmark">
                            </button>
                        </div>

                    </div>
                    <div class="platinium  d-lg-flex d-xl-flex align-items-xl-center d-md-flex d-flex align-items-center">

                        <div class="adicionar-produtos d-flex d-xl-flex align-items-xl-center d-lg-flex align-items-lg-center d-md-flex align-items-md-center justify-content-md-center">

                            <button id="remove-plat" class="btn-produtos"> - </button>
                            <span id="platinium-added-number"> 0 </span>
                            <button id="add-plat" class="btn-produtos">+</button>

                        </div>
                        <div class="produto-tipo d-xl-flex flex-xl-column align-items position-relative">
                            <span class="acesso"> Acesso </span>
                            <span class="tipo-produto">Platinium </span>
                            <button type="button" class="btn produtos-duvida" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
                                <img src="./images/question-mark.png" alt="" class="qmark">
                            </button>
                        </div>

                    </div>

                </div>

                <button type="# " role="#" class="btn-adicionar-produto"> <span id="plusbtn"> + </span> Adicionar</button>
            </div>

  @media (max-width: 575.98px) {
    .dots1 {

        left: 0;
        width: 40px;
        top: 20px;
        left: 20px;
    }

    .mleft {
margin-left: auto;
margin-right: auto;
margin-bottom: -50px;

                    }
    .headerLogo {
        margin-top: 64px;
        width: 200px;
    }
    .tipo-produto{
        font-size: 25px;
        margin-left:1px;
    }

    .cupom-input-field {
        margin-right: 0;
        margin-left: 0;
        position: relative;
        left:-2rem

    }

    .cupom-icon {
        left: 1rem;
    }
    .produtos {
        margin-top: 1px;
        margin-bottom: 1px;
    }

    .acesso {
        margin-top: 0px;
    }

    .checkout-head {
        min-width: 95%;
        margin: auto;
        margin-top: 1rem;
        margin-bottom: 100px;
    }

    .produto-tipo {
        max-width: 30%;
        min-width: 0%;
        line-height: 1.1rem;
        display: inline-block!Important;
    }
    .btn-adicionar-produto {
        margin: auto;
        display: block;
        margin-bottom: 32px;
    }
    .respo {
        text-align: center;
    }

    footer {
        display: block;
        margin: 0;

    }

    .bg3 {
        text-align: center;
    }
    .adicionar-produtos {
        margin-right: 0px;
    }
    .produtos-duvida {
        top: 0;
        left: 150%;
    }
}