Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Website doesn't load properly in Safari browser

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.

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?

like image 460
ThemesCreator Avatar asked May 20 '15 18:05

ThemesCreator


People also ask

Why is my Safari not loading certain websites?

Check Safari settingsThe webpage might not be compatible with one or more browser settings, which you can turn on or off as needed. From the menu bar in Safari, choose Safari > Settings (or Preferences). Then click Websites, Privacy, or Security to access these settings: Websites settings.

Is Safari having issues today?

All services are operating normally.

How do I fix my Safari back to normal?

To reset Safari, follow these steps: In the Safari menu, choose 'Preferences...' Click the 'Privacy' button at the top of the new window that appears, and then click the 'Remove All Website Data' button. It will ask you if you are sure you want to remove all data stored by websites on your computer.


2 Answers

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

like image 155
NotBramKorsten Avatar answered Nov 16 '22 16:11

NotBramKorsten


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;} 
}
like image 1
Jimmy Avatar answered Nov 16 '22 15:11

Jimmy