El sitio web no se carga correctamente en el navegador Safari

2 minutos de lectura

avatar de usuario
Creador de temas

Este es mi sitio web: http://themescreators.com/seven-host/

Estoy usando un efecto de carga personalizado y por alguna razón no funciona bien.

Este es el código utilizado en el efecto de carga:

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

En Safari, el “.loadingContainer” no se elimina después de cargar la página, por lo que solo ve toda la página en blanco. ¿Alguien puede ayudarme a arreglar esto?

  • no puedo reproducir el problemay ese código no parece estar en el enlace.

    – Alexander O’Mara

    23 mayo 2015 a las 23:19

  • ¿Puedes decirme que estás usando Safari en la ventana?

    – Ritesh d joshi

    26 mayo 2015 a las 13:28

  • instalaste quick time player?

    – Ritesh d joshi

    26 mayo 2015 a las 13:31

  • Yo tampoco puedo reproducirlo. Se comporta en Safari igual que en Chrome y Firefox.

    – Cu3PO42

    30 de mayo de 2015 a las 15:18

Intenta reemplazar jQuery(window).load(function(){con lo siguiente

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

Que yo sepa, no es necesario especificar jquery en el código. En mi ejemplo, jquery manejará automáticamente el fadeOut() manipulador. El resto del código puede ser manejado por el núcleo de Javascript. También uso este código en mi sitio web y funciona perfectamente en todos los sistemas operativos (incluso Android).

  • En realidad, WordPress está usando jQuery en modo noConflict() de forma predeterminada, por lo que, a menos que use la función anónima y proporcione $ como un alias de jQuery dentro, obtendrá un error de tipo.

    – Daniel

    27 mayo 2015 a las 23:22

No puedo reproducir tu problema. ¿Quizás eliminó el “contenedor de carga” de su sitio?

Para decir acerca de su código, deberá definir la animación “stretchdelay”.

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

¿Ha sido útil esta solución?