Предварительная загрузка страницы работает во всех основных браузерах, кроме Safari

Question

У меня есть страница предварительной загрузки, которая показывает анимацию CSS до полной загрузки веб-страницы в браузере клиента. Он работает в Chrome, Firefox и Internet Explorer, но не работает в Safari. Даже команды CSS не работают должным образом в Safari, и я не могу понять, почему!

Когда я открываю его в Safari, первая проблема заключается в том, что анимация не работает должным образом. Я даже добавил @ -webkit-keyframes, но это ничего не изменило. Но что еще более странно, так это то, что код javascript тоже не работает. Например, даже если я укажу, что тело больше не нужно прокручивать, я все равно могу прокрутить его вниз. Я предполагаю, что это кросс-браузерная проблема с javascript, но я не могу понять, что это такое. Это потому что я использую событие "загрузка"? Может быть, Safari не распознает это?

Я хотел переписать код с помощью jQuery, но не смог найти эквивалент для window.addEvenListener ("load", callback ()); в jQuery. Прослушиватель событий .load () устарел.

ОБНОВЛЕНИЕ: Кажется, проблема в том, что Safari неправильно выполняет переполнение: скрыто. Кто-нибудь знает обходной путь для этой проблемы?

Вот MVC

document.body.style.overflow = "hidden";
    
setTimeout(() => {
  window.addEventListener('load', loaded());  
}, 5000);
    

function loaded(){
  document.getElementById('loading').style.display = 'none';
  document.body.style.overflowY = 'visible';
}

#loading {
  display: block;
  width: 100vw;
  height: 100vh;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  background-color: white;
  z-index: 10;
}
#flex_wrapper{
  position: relative;
  width: 100%;
  top: calc(50% - 50px);
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}
#loading_text{
  width: 100%;
  font-size: 1.2em;
  font-weight: 400;
  position: relative;
  top: calc(50% - 30px);
  height: 50px;
  text-align: center;
  line-height: 25px;
}
.loading_bar{
  width: 8px;
  height: 50px;
  background-color: black;
  margin: 0 5px;
  border-radius: 10px;
  animation: loading 1s infinite;
}
@keyframes loading{
  0%{
    height: 0px;
  }
  50%{
    height: 50px;
  }
  100%{
    height: 0px;
  }
}
.loading_bar:nth-child(2){
  animation-delay: 0.1s;
}

.loading_bar:nth-child(3){
  animation-delay: 0.2s;
}

.loading_bar:nth-child(3){
  animation-delay: 0.3s;
}

.loading_bar:nth-child(4){
  animation-delay: 0.4s;
}

.loading_bar:nth-child(5){
  animation-delay: 0.5s;
}

.loading_bar:nth-child(6){
  animation-delay: 0.6s;
}

.loading_bar:nth-child(7){
  animation-delay: 0.7s;
}

.loading_bar:nth-child(8){
  animation-delay: 0.8s;
}

.loading_bar:nth-child(9){
  animation-delay: 0.9s;
}

.loading_bar:nth-child(10){
  animation-delay: 1s;
}

<div id="loading">
  <div id="flex_wrapper">
    <div class="loading_bar"></div>
    <div class="loading_bar"></div>
    <div class="loading_bar"></div>
    <div class="loading_bar"></div>
    <div class="loading_bar"></div>
    <div class="loading_bar"></div>
    <div class="loading_bar"></div>
    <div class="loading_bar"></div>
    <div class="loading_bar"></div>
    <div class="loading_bar"></div>
  </div>
  <div id="loading_text">
    Please wait<br> Loading...
  </div>
</div>

Answer 1

Ну, я наконец-то нашел проблему!

Проблема в том, что overflow: hidden; недостаточно для остановки прокрутки на iOS. Вместо этого вы должны запретить действие по умолчанию для события touchmove, чтобы сделать прокрутку невозможной. Вот исправленная версия моего кода JavaScript, которая работает как в настольных, так и в мобильных браузерах:

<script language="javascript" type="text/javascript">
disableScroll();
document.body.style.overflowY = "hidden";

window.addEventListener("load", function(){
  document.getElementById("loading").style.display = "none";
  document.body.style.overflowY = "visible";
  enableScroll();
});  

function preventDefault(e){
  e.preventDefault();
}

function disableScroll(){
    document.body.addEventListener('touchmove', preventDefault, { passive: false });
}
function enableScroll(){
    document.body.removeEventListener('touchmove', preventDefault, { passive: false });
}
</script>

Автор этой идеи получил сообщение