Navigation saccadée avec css3 [non résolu]

Bonjour à tous,
Je rencontre un problème de navigation (saccades au moment du scroll) avec ce site http://le100patates.fr/carte.html auquel j'ai ajouté une petite feuille de style css3 (elle est importée dans la css2.1) que voilà :

@charset "UTF-8";
#conteneur {	
	-moz-box-shadow: 1px 1px 20px #25211d;  
    -webkit-box-shadow: 1px 1px 20px #25211d;  
    box-shadow: 1px 1px 20px #25211d; 
}
.ombre_img {
	-moz-box-shadow: 2px 2px 11px #79797d;  
    -webkit-box-shadow: 2px 2px 11px #79797d;  
    box-shadow: 2px 2px 11px #79797d;
}
.ombre_cont {
	-moz-box-shadow: 4px 4px 14px #78797f;  
    -webkit-box-shadow: 4px 4px 14px #78797f;  
    box-shadow: 4px 4px 14px #78797f;
}
#texte_top h3, #nouveau, #bottom h3, #entete_traiteur h2, input, textarea {
	-moz-border-radius: 5px; 
  	-webkit-border-radius: 5px; 
    border-radius: 5px;	
}
#footer a:hover, #footer_carte a:hover {
	text-shadow: 0px 0px 5px #be3b1d; 
}

C'est la première fois que je rencontre ce problème.
Une idée ?
Modifié par groshapas (14 Jan 2011 - 17:18)

Ce n'est pas la css qui pose problème mais ton javascript.

Il y a vraisemblablement un événement géré au niveau du scroll qui fait tout ramer.
Je dirais au hasard le truc qui gère le lien 'retour vers le haut'

Test en désactivant javascript tu verras.

Salut !

text-shadow: 0px 0px 5px #be3b1d;  

Essaye en enlevant juste l'ombre sur le texte, mon petit doigt me dit que c'est ça.

Salut à vous et merci de votre réponse,
Hélas le problème ne vient ni du javascript ni du text-shadow.
Mais quand je supprime la css3, la navigation est correcte.
Modifié par groshapas (14 Jan 2011 - 15:32)

Hum...

Le problème est il présent sur plusieurs navigateurs?
Parfois, deux choses imbriquées peuvent faire saccader l'utilisation du scroll, j'ai deja eu des problèmes semblables.
Outre une forte utilisation de text-shadow, certaines règles de overflow (dans une Div par exemple) peuvent poser problème.

Tente de changer ce sur quoi influe ton scroll, par exemple le body plutôt que ton cadre central.

Pour ma part ça redevient correct quand je supprime fond.jpg. Essaye de faire une image plus large que 1pixel.

Chez moi, voici ce que je dois désactiver (via firebug) pour avoir un scroll correcte :

#conteneur {
    -moz-box-shadow: 1px 1px 20px #25211D;
}

The_Moye a écrit :
Tente de changer ce sur quoi influe ton scroll, par exemple le body plutôt que ton cadre central.

Je viens d'essayer de modifier mon script (srcollToTop.js) en ancrant "body" et d'autres balises hors conteneur, mais ça ne change rien.

The_Moye a écrit :
Le problème est il présent sur plusieurs navigateurs?

Oui sur FF3.6, Safari 5, Opera 11 et Chrome.

The_Moye a écrit :
Chez moi, voici ce que je dois désactiver (via firebug) pour avoir un scroll correcte : #conteneur {
-moz-box-shadow: 1px 1px 20px #25211D;
}

C'est vrai que supprimer #conteneur de la css3 améliore un peu la situation sur tous les navigateurs. Mais ça reste très saccadé.
Modifié par groshapas (14 Jan 2011 - 16:04)

Définitivement le problème vient de la CSS3 et je ne comprend pas pourquoi...
Sans CSS3, la navigation est normale sur l'ensemble su site, y compris le script scroll (pas facile à prononcer !)

C'est comme ça, ça arrive.

Certaines configurations doivent être "chiantes" à calculer pour le moteur de rendu.
D'où une forte saccade.

Bon, en ce début d'année j'aurais préféré une bonne résolution à une résignation...
Je vais essayer dans un premier temps de revoir le HTML, pour me passer au max de css3.
Merci de votre aide en tout cas.