O site não é carregado corretamente no navegador Safari

9

Este é o meu site: link

Estou usando um efeito de carregamento personalizado e, por algum motivo, ele não funciona bem.

Este é o código usado no efeito de carregamento:

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

No Safari, o ".loadingContainer" não é removido depois que a página é carregada, portanto, você vê apenas toda a página em branco. Alguém pode me ajudar a consertar isso?

    
por ThemesCreator 20.05.2015 в 20:59
fonte

2 respostas

1

Tente substituir jQuery(window).load(function(){ pelo seguinte

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

Até onde eu sei, não há necessidade de especificar jquery no código. No meu exemplo, o jquery manipulará automaticamente o manipulador fadeOut() . O restante do código pode ser manipulado pelo Javascript principal. Eu também uso este código no meu site, e ele funciona perfeitamente em todos os sistemas operacionais (até android).

    
por NotBramKorsten 26.05.2015 / 16:10
fonte
1

Não consigo reproduzir seu problema. Talvez você tenha removido o "loadingcontainer" do seu site?

Para falar sobre seu código, você precisará definir a animação "stretchdelay".

@keyframes stretchdelay {
    from {opacity: 0;}
    to {opacity: 1;}
}
@-webkit-keyframes stretchdelay {
    from {opacity: 0;}
    to {opacity: 1;} 
}
    
por Jimmy 28.05.2015 / 16:49
fonte