Баг скролла модального окна

110
06 сентября 2019, 17:00

Есть вот такая страница с модальным окном (тут):

	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, скролл тоже работает.

Answer 1

В итоге изысканий, выяснилось, что проблема решается заменой

.modal.is-active .modal-inner {
        transform: translateY(0) rotateX(0);
    }

на

.modal.is-active .modal-inner {
        transform: none;
    }
READ ALSO
Как лучше хранить страны и их города?

Как лучше хранить страны и их города?

Разрабатываю продуктТут присутствуют страны и их города

133
Проблемы с установкой MySQL Server

Проблемы с установкой MySQL Server

При попытке установить Server MySQL 80

105
MySQL - OR WHERE

MySQL - OR WHERE

Есть такой запросНа самом деле он больше но я упростил

118
Поиск по частичным совпадениям

Поиск по частичным совпадениям

Я храню в БД адреса компаний:

151