Terrible retard de Chrome lors de l'utilisation de l'effet de parallaxe
tout d'abord, voici un lien vers mon site, d'avoir la question, je suis sur le point de décrire:
http://themes.roussounelosweb.gr/cassiopeia/
Dans Firefox, IE 9, Opera, Safari, iOS le site a l'air parfait et fonctionne en douceur. Le problème se trouve avec google Chrome et Android, où le scrolling est incroyablement lag et les images d'arrière-plan à l'aide d'un effet de parallaxe animer choppily.
Je soupçonne que le problème se trouve avec background-size:cover et le background-attachment:fixed attributs de mes images, mais je n'ai pas encore trouver une solution à ce problème.
Vous pouvez voir de première main et avoir une meilleure idée sur le lien ci-dessus. S'il vous plaît, aider; je suis à la dernière étape de finition de ce projet, et ce bug est vraiment me retient.
section{
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-attachment:fixed;
overflow:hidden;
}
section.section1{
background-image:url(../img/section1.jpg);
background-repeat:no-repeat;
color:#dedede;
text-shadow:1px 1px 5px rgba(0,0,0,0.8);
position:relative;
padding:20px 0px;
z-index:1;
overflow:hidden;
}
Paul Irish a un grand la vidéo sur YouTube débogage d'un principe identique problème - peut-être en valeur un regard.
La parallaxe problème de performance sur chrome est la principale raison que j'ai l'habitude de ne pas utiliser la parallaxe techniques. Même si la question a obtenu répondu correctement et résoudre ce cas, quelqu'un peut-il m'indiquer POURQUOI cela se produit uniquement con navigateur google chrome? Comme l'OP a déclaré, sur presque n'importe quel autre appareil/navigateur, le site fonctionne en douceur (et btw, le design de qualité, beau travail!) mais sur le navigateur google chrome et android, il viens d'obtenir agitée.
OriginalL'auteur | 2013-11-01
Vous devez vous connecter pour publier un commentaire.
Je ne crois pas que votre problème est dans le CSS, mais plutôt dans le JS.
Tout d'abord, je peux voir que vous êtes en utilisant nicescroll avec parallax.js. Il pourrait être les deux sont contradictoires -- essayez de supprimer nicescroll de votre JS et vérifier si c'est mieux.
Deuxièmement, l'analyse de votre cadre de l'activité avec les développeurs de l'outil timeline, vous pouvez voir l'endroit exact où les cadres drop:
Vous êtes de cuisson 33 minuteries lorsque vous êtes de défilement. Vous pourriez probablement essayez de déboguer un peu de votre code, déliant un rappel à un moment de l'événement scroll et de vérifier ce qui est de la problématique.
Mise à JOUR:
Je pense que Robert a raison dans les commentaires: vos origines sont lourd. Puisque c'est déjà un grand consommateur d'UC page, je suppose que le navigateur gère avec difficulté la parallaxe sur de tels éléments de grande taille. Essayez de réduire, de compresser et de les sauver de qualité inférieure.
Nice! Content d'avoir pu aider.
Également utilisé underscore.js la bibliothèque, à la commande de puissance de certains événements, le modèle fonctionne BEAUCOUP plus lisse maintenant, sur tous les appareils/configurations.
La parallaxe problème de performance sur chrome est la principale raison que j'ai l'habitude de ne pas utiliser la parallaxe techniques. Même si la question a obtenu répondu correctement et résoudre ce cas, quelqu'un peut-il m'indiquer POURQUOI cela se produit uniquement con navigateur google chrome? Comme l'OP a déclaré, sur presque n'importe quel autre appareil/navigateur, le site fonctionne en douceur (et btw, le design de qualité, beau travail!) mais sur le navigateur google chrome et android, il viens d'obtenir agitée.
Mauvaises performances sur les parallaxes sont généralement soulevées par de mauvais code ou de mauvaises décisions (trop d'animations/interactions dans la même page?). Autant que je sache, chaque navigateur gère les événements (comme le défilement) d'une manière différente. Sans aller trop profond, je suis en supposant que google Chrome, il gère les parchemins (et donc de la parallaxe d'une manière différente que les autres navigateurs. Je vous suggère de lire cet article par Paul Lewis (Chrome Équipe, et un bon gars), il a quelques bons conseils sur la parallaxe de bonnes pratiques.
OriginalL'auteur skz