Почему overflow: hidden; у body так странно влияет на popup-окно?

Question

[Danila232]

Вообще не понимаю, у меня у body стоит overflow-x: hidden;(хотя это необязательное свойство, его добавляют на всякий случай) и попап работает как надо, появляется на весь экран, при его вызове не прыгает вверх страницы, когда открыт - не скроллится(хотя по идее должен! и при его открытии для body добавляют класс .fixed-page с overflow: hidden, чтобы сам сайт не скролился под оверлеем)

Но если у body убрать overflow-x: hidden(даже когда прописан .fixed-page), то всё почему то ломается и происходит как на скрине. Не понимаю, как overflow-x: hidden вообще может влиять на отображение класса .popup__main. При чём если у body заменить hidden на clip, то попап всё равно ломается, нужен именно hidden.

<div class="popup__main">
	<div class="container">
		<div class="popup">
			<img src="svg/cross.svg" alt="">
			<p>Текст в Окне</p>
		</div>
	</div>
</div>

html, body{
	height: 100%;
	width: 100%;
	font-size: 14px;
	font-family: Nunito Sans;
	color: #000;
	overflow-x: hidden;
}
body.fixed-page{
	
}
.popup__main{
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100vh;
	background: rgba(188, 213, 251, .7);
	backdrop-filter: blur(1px);
	display: none;
	z-index: 102;
}
.popup{
	position: relative;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background: #fff;
	max-width: 400px;
	height: 300px;
}

Как это вообще работает?

Comments

[Ankhena]

хотя это необязательное свойство, его добавляют на всякий случай

1. На body оно не сработает на мобилках.
2. Не нужно его ставить на всякий случай.
Нужно верстать так, чтобы ничего случайно не вываливалось.
Там где оно должно вываливаться, лучше вешать overflow на свою же секцию (или типа того, но не на body)
Бездумный overflow может привести к потери части контента.

Для всего остального сделайте песочницу на codepen.io