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

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

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

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;
}

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