Как исправить переполнение CSS в Safari с помощью начальной загрузки и flex? - PullRequest
Новая
       54

Как исправить переполнение CSS в Safari с помощью начальной загрузки и flex?

0 голосов
/ 22 декабря 2019

У меня проблема css в Safari с верхней строкой меню на моей странице, которая построена с помощью bootstrap и flex. Меню расширяется по вертикали, показывая простой пользовательский интерфейс при нажатии. Переполнение должно быть скрыто, если оно не развернуто, но в Safari каждый div перемещается вверх из области переполнения в верхнюю строку меню, когда не развернуто. При расширении меню вертикальный интервал корректируется и выглядит одинаково для всех браузеров. Как сделать так, чтобы элементы div в области переполнения оставались скрытыми в Safari, когда меню не развернуто по вертикали?

CSS: 

        .top-bar {
            display: flex;
            flex-direction:column;
            position:fixed;
            top:0;
            height: 4em;
            overflow: hidden;
            transition: all .3s ease;
            background-color: #1b1b1b;
        }

        .top-bar.expand {
            height: 38em;
        }

        .innerbar{
            width:1156px;
            justify-content: space-between;
        }

HTML: 

<div class="container-fluid top-bar">

    <div class="d-flex justify-content-around">
        <div class="d-flex innerbar justify-content-between">
            <h4 class="text-light m-1 p-2 font-weight-bold">PC Sales App</h4>

            <div class="arrow"></div>
        </div>
    </div>

    <div class="d-flex justify-content-around">
        <div class="d-flex p-2 justify-content-center">
            <input id="slider" type="text"/><br/>
        </div>
    </div>

    <div class="d-flex justify-content-around">
        <div class="d-flex justify-content-center align-items-start">
            <div class="text-light p-2 lowbound">$0</div>
            <div class="text-light p-2 ml-4">to</div>
            <div class="text-light p-2 ml-4 upbound">$3000</div>
        </div>
    </div>

    <div class="d-flex justify-content-around">
        <div class="d-flex flex-wrap justify-content-center buttons">
        </div>
    </div>

</div>

В Safari (неверно): Safari (not working)

В Chrome и IE (правильно): Chrome (working)

...