Website doesn’t load properly in Safari browser

1 Views

This is my website: http://themescreators.com/seven-host/

I am using a custom loading effect and for some reason it doesn’t work well.

Read More

This is the code used on the loading effect:

HTML: 

<div class="loadingContainer">
   <div class="loading">
      <div class="rect1"></div>
      <div class="rect2"></div>
      <div class="rect3"></div>
      <div class="rect4"></div>
      <div class="rect5"></div>
   </div>
</div>

CSS: 

.loadingContainer {
  text-align: center;
  margin: 0 auto;
  position: absolute;
  top: 50%;
  left: 50%;
  display: inline-block;
  z-index: 1000;
}
.loadingContainer .loading {
  display: inline-block;
  text-align: center;
}
.loadingContainer .loading > div {
  background-color: #21242e;
  height: 80px;
  width: 6px;
  display: inline-block;
  -webkit-animation: stretchdelay 1.2s infinite ease-in-out;
  animation: stretchdelay 1.2s infinite ease-in-out;
}
.loadingContainer .loading .rect2 {
  -webkit-animation-delay: -1.1s;
  animation-delay: -1.1s;
}
.loadingContainer .loading .rect3 {
  -webkit-animation-delay: -1s;
  animation-delay: -1s;
}
.loadingContainer .loading .rect4 {
  -webkit-animation-delay: -0.9s;
  animation-delay: -0.9s;
}
.loadingContainer .loading .rect5 {
  -webkit-animation-delay: -0.8s;
  animation-delay: -0.8s;
}
.loading i {
  width: 52px;
  height: 60px;
  position: absolute;
  left: 50%;
  margin-left: -21px;
  top: 50%;
  margin-top: -30px;
  font-size: 60px;
  display: inline-block;
}

JS: 

  jQuery(window).load(function(){
    jQuery('.loadingContainer').css({'opacity' : 0 , 'display' : 'none'});
  });

In Safari the “.loadingContainer” isn’t removed after the page is loaded, so you only see all the page blank.
Can somebody help me fixing this?

Post Views: 1

Related posts

2 comments

  1. Try replacing jQuery(window).load(function(){with the following

    $(document).ready(function() {
    // Fadeout the screen when the page is fully loaded
    $('.loadingContainer').fadeOut();
});

    As far as I know there is no need to specify jquery in the code. In my example jquery will automatically handle the fadeOut() handler. The rest of the code can be handled by the core Javascript. I also use this code in my website, and it works flawlessly on every operating system (even android).

  2. I can’t reproduce your issue. Perhaps did you remove the “loadingcontainer” from your site?

    To say about your code, you will need to define the “stretchdelay” animation.

    @keyframes stretchdelay {
    from {opacity: 0;}
    to {opacity: 1;}
}
@-webkit-keyframes stretchdelay {
    from {opacity: 0;}
    to {opacity: 1;} 
}

Comments are closed.