Почему в модальном окне, не работает скролл?

Всем привет.

Есть модальное окно:

<div class="modal">
 <div class="modal-form">
  <div class="modal-close" data-modal-hidden="modal-form">
   <svg class="icon icon-close "><use xlink:href="_img/svg/symbol/sprite.svg#close"></use></svg>
  </div>
  <div class="test" style="height: 2000px; background-color: #ffffff; width:"></div>
 </div>
</div>



Стили модального окна:

.modal {
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 z-index: 6;
 display: flex;
 align-items: center;
 justify-content: center;
 visibility: collapse;
 opacity: 0;
 background-color: rgba(0, 0, 0, 0.6);
 overflow: auto;
 transition: all 0.5s ease;
}
.modal--is-show {
 opacity: 1;
 visibility: visible;
}
.modal-close {
 position: absolute;
 top: 0;
 right: 0;
 width: 60px;
 height: 60px;
 display: flex;
 align-items: center;
 justify-content: center;
 background-color: #204c96;
 cursor: pointer;
 transition: all 0.5s ease;
}
.modal-form {
 position: relative;
 margin: auto;
 height: auto;
 width: auto;
 max-width: 1000px;
 padding-right: 60px;
 transition: all 0.5s ease;
 animation: lightSpeedOut 0.5s ease;
 animation-fill-mode: forwards;
 align-items: center;
 flex-direction: column;
 justify-content: center;
 display: none;
}
.modal-form--is-visible {
 animation: lightSpeedIn 0.5s ease;
 animation-fill-mode: forwards;
 display: flex;
}


При открытии этого модального окна в Яндекс.Браузер или Google Chrome, у окна есть полоса прокрутки, но при прокрутки колесика мыши ничего не происходит, полоса на месте, форма на месте. Если изменить размер окна или через панель разработчика изменить какое нибудь значение стиля (добавить новое) окно начинается скролиться без каких либо проблем.

В мозиле такого нету, все идеально скролиться.

Кто нибудь сталкивался с такой или похожей проблемой ?
Как ее решить ?

Заранее спасибо
  • Вопрос задан
  • 904 просмотра
Решения вопроса 1
@Egor1324 Автор вопроса
Я нашел проблему, из-за чего не скроллится, вся проблема в
.modal {
 transition: all 0.5s ease;
}

При удалении transition, все начинает корректно работать... И что делать с этим, не знаю....
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
@justabit
Попробуйте элементу modal-form дать z-index выше чем у modal.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы