0

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

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

4
  • Да, интересный баг. Связано с transition именно для opacity. Можно opacity заменить на background и будет нормально работать codepen.io/anon/pen/mvOWOr 30 янв 2019 в 9:08
  • @stepan, да, как вариант, спасибо. Правда анимация обратная анимация ("исчезновение") не работает в таком варианте.
    – Renton
    30 янв 2019 в 9:28
  • Еще вариант: юзать вместо "opacity" - "filter: opacity()", но поддержка у него похуже.
    – Renton
    30 янв 2019 в 9:33
  • Еще момент. Скролл начинает работать, если удалить второе значение "transform". В моем случае это rotateX(45deg).
    – Renton
    30 янв 2019 в 18:35

1 ответ 1

0

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

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

на

.modal.is-active .modal-inner {
        transform: none;
    }
2
  • Есть много способов решить проблему, это вы и сами знаете. А вот причина проблемы - это интересно! 31 янв 2019 в 4:59
  • @StepanKasyanenko причина - баг браузера, видимо. Что ж тут поделаешь.
    – Renton
    31 янв 2019 в 8:22

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.