Preloading page works in all major browsers but Safari

Question

I have a preloading page that shows a CSS animation before the webpage has been fully loaded in the client's browser. It works in Chrome, Firefox and Internet Explorer but it fails to work in Safari. Even the CSS commands do not work properly in Safari and I can't figure why!

When I open it in Safari, the first problem is that the animation doesn't work properly. I even added @-webkit-keyframes but it didn't change anything. But what is even weirder is that the javascript code doesn't work either. For example, even though I specify that body should no longer be scrolled, I can still scroll it down. I suppose it's a cross-browser issue with javascript, but I can't figure what it is exactly. Is it because I'm using the event "load"? Maybe Safari doesn't recognize it?

I wanted to rewrite the code using jQuery, but I couldn't find an equivalent for window.addEvenListener("load",callback()); in jQuery. The event listener .load() has been deprecated.

UPDATE: The problem seems to be that Safari doesn't properly execute overflow: hidden. Does anyone know any workaround for this problem?

Here's the 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>

@JarlikStepsto I'm using vanilla javascript here. I mentioned jQuery only because I wanted to say that I have tried that too but it didn't work for me. I want the preloading page to disappear when the DOM and all the associated files have been loaded completely. Ready() will fire when the DOM is ready, but the images or other files might still be loading. — stressed out, Mar 22 '19 at 18:14
I recently had some CSS bugs in Safari. My problem was solved by removing the base-tag, from the head-section of my html page. — Peter Bode, Mar 22 '19 at 18:33

score 0 · Accepted Answer · answered Mar 22 '19 at 19:07

Well, I finally found the issue!

The issue is that overflow: hidden; is not enough to stop scrolling on iOS. Instead, you should prevent the default action for the event touchmove to make scrolling impossible. Here's the corrected version of my JavaScript code which works both on desktop and mobile browsers:

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

The credit for this idea goes to this post

Preloading page works in all major browsers but Safari

1 Answers1