animation facilitant jQuery de défilement de la fenêtre dans Firefox (bug ou mon mauvais?)

Question

Exemple Tout d'abord, voici mon code et problème:
http://www.nathanstpierre.com/MBX/showoff.html

Le numéro Donc ce que je vois est lorsque vous cliquez sur les boutons sur la gauche, la fenêtre défile à la rubrique appropriée. Dans tous les navigateurs, mais Firefox (y compris IE ... halètement ) ce qui est très lisse. Toutefois, si vous réduisez la hauteur de la fenêtre, elle devient lisse sur tous les ordinateurs. Je l'ai déjà essayé cela sur plusieurs ordinateurs et sur IE 7-8, Google Chrome, Safari et Firefox 3.5. J'ai éliminé tous les bits de graphique et de la couleur sur la page, donc ceux qui ne sont pas la question. J'ai réussi à se débarrasser de la barre latérale qui vous suit, c'est pas.

LA THÉORIE Je pense que le plugin jQuery assouplissement calcule la distance que vous besoin d'aller, et divise ensuite le nombre de pixels dont il a besoin de se déplacer par unité de durée déterminée (disons 300 pixels de plus de 30 millisecondes, donc 10px / ms). Chaque autre navigateur semble être en mesure de faire une transition en douceur, mais peut-être la granularité fournie par l'événement de défilement de la fenêtre est pas assez compressé pour Firefox pour faire ce saccadées? Ou peut-être que je utilise le mauvais plug-in d'assouplissement, ou les mauvais réglages.

CODE

$("#sidenav a").click(function () {
        $("#sidenav a").animate({'color':'#6d6d6d'},{"duration":400});
        $(this).animate({"color":"#fff"},{"duration":400});
        clicktarget=$(this).attr("href");
        $("html, body").animate({scrollTop: $(clicktarget).offset().top},{"duration":300,"easing":"easeout"});
        return false;
      });

LA LOGIQUE

Ajoutez un écouteur d'événement à chacun une étiquette sur le sidenav onClick. Cela obtenir le haut de l'élément. Offset () dans le document avec le même ID que l'attribut href de ce lien, puis animer du scrollTop courant en haut de cet élément de décalage ().. La logique est saine, et fonctionne bien dans tous les navigateurs Firefox SAUF ... autant que je peux dire.

PLAIDOYER

Qu'est-ce que je fais mal? Est-ce un bug?

Merci!

UPDATE

Eh bien, je ne peux pas en bonne conscience choisir l'une des réponses présentées ici, car aucun d'entre eux ont effectivement donné une résolution sur la question, donc si vous suivez ce choisissez votre favori et la générosité vais aller à une avec le plus de voix.

La question semble être la façon que Firefox a) rend la transparence et b) traite des événements de défilement. Potentiellement avec suffisamment de puissance de c'est pas un problème, mais ce qui me rend triste est que IE (de tous les navigateurs) est capable de rendre ce beau sur le matériel de qualité inférieure. J'approche Mozilla avec la question et voir s'ils ont quelque chose à dire à ce sujet.

Pour de plus édification, les éléments suivants sont fournis sans frais:

Avec transparence
Sans transparence

EDIT: La question a été répondu, mais maintenant je ne peux pas choisir. Tout le monde sait ce qui se passe avec ça?

Mise à jour FINALE Suffisamment de temps avait passé qu'ils me laisser revenir la générosité, j'ai donc choisi la réponse qui était correcte. Il ressemble à l'ombre boîte et quelques autres effets causer des problèmes de défilement dans Firefox à cause de la façon dont ils rendent. FF 4.0 + gère ce mieux, mais certains ordinateurs ont encore des problèmes. Ceci est un grand heads-up pour les personnes mettant en œuvre CSS3:. Tester l'interaction sur tous les navigateurs et voir si les coûts de performance sont justifiables

Answer 1

La mauvaise performance semble être causé par la propriété -moz-box-shadow, si vous supprimez toutes les déclarations de cette propriété (ou les désactiver avec Firebug) l'animation de défilement est beaucoup plus lisse.

Answer 2

S'il vous plaît essayer jQuery 1.4. Cela semble l'être beaucoup plus rapide, puis jQuery 1.3.2.

Si vous avez besoin de déboguer ce genre de choses, mettre les fichiers non compressés js dans votre code et utiliser Firebug avec son profil, le profil des fonctions.

Answer 3

page est un peu lourd avec les deux milieux (étant un .png transparent ..)

La question est avec Firefox et / ou votre machine de manipulation de l'animation. Cochez l'option de défilement en douceur de Firefox ( Outils -> Options -> Avancé -> Général -> Utiliser le défilement régulier ). Il est peut-être la raison si elle est cochée ...

Answer 4

chaque fois que je l'ai essayé un effet similaire que je l'ai utilisé ScrollTo. peut-être que cela aidera

ScrollTo Plugin

Answer 5

J'ai eu le même problème avec FF 3.5 - ressemble vraiment à un problème de rendu. Si vous essayez Nouveaux 3.6 il sera probablement ok.

J'avais des problèmes avec le curseur de coda doherty 2.0 btw.

Cordialement

Andrej