Проблема в сафари с использованием transform: translateY с позиции: фиксированный элемент и переполнение прокрутки - PullRequest
Новая
       22

Проблема в сафари с использованием transform: translateY с позиции: фиксированный элемент и переполнение прокрутки

0 голосов
/ 12 июня 2019

У меня есть модал, похожий на оверлей, который я оживляю снизу экрана, используя transform:translateY со всеми префиксами вендора. Анимация работает отлично, однако, когда анимация завершена, полосы прокрутки в модальном наложении исчезают (только в Safari).

Если размер окна изменяется или я переключаю overflow:scroll в инструментах разработчика, они немедленно возвращаются. Я подозреваю, что проблема с transform:translateY, так как при повторной попытке перехода с использованием bottom все работает как положено. Есть ли какие-либо возможные обходные пути или исправления для этого? 

 .slide-component-container
    position: fixed;
    bottom:0;
    z-index: 2003;
    right: 0;
    left: 275px;
    background-color: white;

    overflow: scroll !important;

    -webkit-transition: all .5s cubic-bezier(0.19, 1, 0.22, 1);
    -moz-transition: all .5s cubic-bezier(0.19, 1, 0.22, 1);
    -o-transition: all .5s cubic-bezier(0.19, 1, 0.22, 1);
    transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1);

    -ms-transform: translateY(110%);
    -webkit-transform: -webkit-translateY(110%);
    -webkit-transform: translateY(110%);
    -moz-transform: translateY(110%);
    -o-transform: translateY(110%);
    transform: translateY(110%);





.slide-component-container.open
    -ms-transform: translateY(0%);
    -webkit-transform: -webkit-translateY(0%);
    -webkit-transform: translateY(0%);
    -moz-transform: translateY(0%);
    -o-transform: translateY(0%);
    transform: translateY(0%);

Соответствующий класс CSS, прикрепленный к моему модальному наложению, при открытии / закрытии я включаю / выключаю класс .open

...