Есть вот такая страница с модальным окном (тут):
var openBtn = document.querySelectorAll('.js-modal'),
modal = document.querySelector('.modal');
for(i=0;i<openBtn.length;i++) {
openBtn[i].addEventListener('click', function() {
modal.classList.add('is-active');
document.body.classList.add('modal-open');
})
}
function modalClose() {
modal.classList.remove('is-active');
document.body.classList.remove('modal-open');
}
window.addEventListener('click', function(close) {
if(close.target == modal) {
modalClose();
}
})
body {
min-height: 3000px;
}
.btn {
display: block;
margin: 30px auto;
background: blue;
color: #fff;
border: none;
border-radius: 6px;
font-size: 36px;
text-align: center;
}
.btn:focus {
outline: none;
box-shadow: 0 0 2px 2px #900;
}
/* start position */
.modal {
visibility: hidden;
display: flex;
justify-content: center;
align-items: flex-start;
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
opacity: 0;
perspective: 700px;
transition: all .3s;
}
.modal-inner {
position: relative;
max-width: 600px;
padding: 15px;
margin: 30px 10px;
transform: translateY(200px) rotateX(45deg);
background: #000;
color: #fff;
border-radius: 20px;
transition: inherit;
}
/* active position */
body.modal-open {
overflow: hidden;
}
.modal.is-active {
visibility: visible;
z-index: 9999;
background: rgba(0,0,0,.95);
opacity: 1;
overflow-y: auto;
}
.modal.is-active .modal-inner {
transform: translateY(0) rotateX(0);
}
<button class="btn js-modal">Open modal window</button>
<p>Таким образом рамки и место обучения кадров представляет собой интересный эксперимент проверки направлений прогрессивного развития. Разнообразный и богатый опыт новая модель организационной деятельности влечет за собой процесс внедрения и модернизации дальнейших направлений развития. Идейные соображения высшего порядка, а также реализация намеченных плановых заданий способствует подготовки и реализации новых предложений. Значимость этих проблем настолько очевидна, что постоянное информационно-пропагандистское обеспечение нашей деятельности представляет собой интересный эксперимент проверки системы обучения кадров, соответствует насущным потребностям.</p>
<button class="btn js-modal" style="margin: 1000px auto;">Open modal window</button>
<div class="modal">
<div class="modal-inner">
<p>Повседневная практика показывает, что дальнейшее развитие различных форм деятельности способствует подготовки и реализации форм развития. Идейные соображения высшего порядка, а также рамки и место обучения кадров позволяет выполнять важные задания по разработке новых предложений. Равным образом реализация намеченных плановых заданий представляет собой интересный эксперимент проверки существенных финансовых и административных условий. Равным образом укрепление и развитие структуры обеспечивает широкому кругу (специалистов) участие в формировании дальнейших направлений развития. Не следует, однако забывать, что дальнейшее развитие различных форм деятельности обеспечивает широкому кругу (специалистов) участие в формировании модели развития.</p>
<p>Повседневная практика показывает, что дальнейшее развитие различных форм деятельности способствует подготовки и реализации форм развития. Идейные соображения высшего порядка, а также рамки и место обучения кадров позволяет выполнять важные задания по разработке новых предложений. Равным образом реализация намеченных плановых заданий представляет собой интересный эксперимент проверки существенных финансовых и административных условий. Равным образом укрепление и развитие структуры обеспечивает широкому кругу (специалистов) участие в формировании дальнейших направлений развития. Не следует, однако забывать, что дальнейшее развитие различных форм деятельности обеспечивает широкому кругу (специалистов) участие в формировании модели развития.</p>
<p>Повседневная практика показывает, что дальнейшее развитие различных форм деятельности способствует подготовки и реализации форм развития. Идейные соображения высшего порядка, а также рамки и место обучения кадров позволяет выполнять важные задания по разработке новых предложений. Равным образом реализация намеченных плановых заданий представляет собой интересный эксперимент проверки существенных финансовых и административных условий. Равным образом укрепление и развитие структуры обеспечивает широкому кругу (специалистов) участие в формировании дальнейших направлений развития. Не следует, однако забывать, что дальнейшее развитие различных форм деятельности обеспечивает широкому кругу (специалистов) участие в формировании модели развития.</p>
<p>Повседневная практика показывает, что дальнейшее развитие различных форм деятельности способствует подготовки и реализации форм развития. Идейные соображения высшего порядка, а также рамки и место обучения кадров позволяет выполнять важные задания по разработке новых предложений. Равным образом реализация намеченных плановых заданий представляет собой интересный эксперимент проверки существенных финансовых и административных условий. Равным образом укрепление и развитие структуры обеспечивает широкому кругу (специалистов) участие в формировании дальнейших направлений развития. Не следует, однако забывать, что дальнейшее развитие различных форм деятельности обеспечивает широкому кругу (специалистов) участие в формировании модели развития.</p>
</div>
</div>
И в ней есть странность: при активном модальном окне, и при большой его высоте, не работает скролл колесом. То есть скроллбаром - без проблем. При этом, если изменить размер окна (либо девТулз открыть\закрыть) - колесо начинает работать. Опытным путем выяснил, что удалив transition - колесо работает.
Chrome 71.0.3578.98. В других браузерах все ок. В местном сниппете тоже скроллится, кстати.
Не могу сказать, что ночами от этого не сплю, просто хотелось бы понять как это (не)работает. Возможно есть известный баг?
UPD: при удалении opacity: 0 у .modal, скролл тоже работает.
В итоге изысканий, выяснилось, что проблема решается заменой
.modal.is-active .modal-inner {
transform: translateY(0) rotateX(0);
}
на
.modal.is-active .modal-inner {
transform: none;
}
Виртуальный выделенный сервер (VDS) становится отличным выбором