Animations JQuery très lentes.

[Norris]

Bonjour !
Je travaille actuellement sur un projet utilisant un peu de JQuery histoire de faire quelques fadeIn / fadeOut pour le côté graphique.
C'est une application traitant du CSS3 et j'ai donc pas mal de coins arrondis, d'ombres portées et autres.

Mon problème est que les effets animés en JQuery sont extrêmement lentes sur Firefox (3.6). Après avoir cherché quelques infos, j'ai juste pu lire quelques messages sur des forums ... souvent sans solutions, qui parlent aussi de problèmes. Pourtant je n'ai trouvé aucune solution ou piste.

En continuant de tester, je me rend compte que plus le DIV sur lequel je fais mes effets contient d'enfants, plus l'animation rame. En faisant le mêe effet sur un DIV vide avec juste une couleur de fond, mais de la même taille, ça rame un peu moins, mais c'est toujours pas terrible comparé à tous les autres navigateurs (je ne parle évidemment pas de IE come c'est une appli CSS3).

Donc voilà, je suis à la recherche du pourquoi du comment
Y a t-il des principes à savoir pour faire des ani fluides sous Firefox ?
Est-ce qu'il existe des alternatives ?
Je trouve tout de même étrange que les animations javascript soient fluides dans Opera / Chrome ou Safari ... et pas dans Firefox

Merci d'avance pour vos infos

[teoli2003]

As-tu testé une version de dev de Firefox (Mozilla Developper Preview 3.7 alpha 2). Il y a eu pas mal de travail du côté des animations.

Aussi as-tu regardé du côté de SMIL ou de CSS3 Transitions? Tout deux seront dans le prochain Firefox (et dans Opera, Chrome, Safari). Et leur but est de se passer du javascript pour ce genre de chose...

[Norris]

Tiens, je ne savais même pas qu'il y'avait une 3.7 alpha ! Merci pour l'info !
Par contre, à ce que j'ai pu lire, elle ne sortira pas cette 3.7 ? je pense que je vais donc attendre ... dommage tout de même.

Je ne connaissais pas du tout SMIL, mais après quelques recherches, ça a l'air fichtrement intéressant ce truc

[pascal]

Tu peux mettre un testcase en ligne ? (un exemple simplifié à l'extrème montrant juste le bug)

Merci

[teoli2003]

Par contre, à ce que j'ai pu lire, elle ne sortira pas cette 3.7 ? je pense que je vais donc attendre ... dommage tout de même.

Ben si, mais le nom n'est pas décidé. Vers octobre, il y aura le prochain Firefox (et le prochain Lorentz et son Flash dans un processus séparé comme 3.6.x vers avril/mai). Le numéro sera soit 3.7 soit 4.0. En attendant les alpha (2 actuellement, et une troisième cette semaine) s'appellent 3.7 pour éviter de se lier les mains sur le numéros.

[Norris]

Merci teoli pour l'info ... je vais regarder ça d'un peu plus près alors.

Voici donc un exemple en ligne qui ressemble à peu de choses près à mon projet pour ce qui est de la structure xhtml et du css. Il y'a donc pas mal "d'effets CSS3" et quelques effets de base en JQuery qui fonctionnent de façon fluide sur Opera(10.5), Chrome, Safari .... mais qui rame dans Firefox 3.6.

L'exemple en ligne

[pascal]

C'est fluide chez moi avec 3.6 et trunk, je ne note pas de différence de fluidité avec Chromium. Peut être as-tu une extension qui interfère.

[Norris]

trunk ?! mais qu'est ce donc que cette bête là ? je m'en vais chercer de ce pas l'info

Peut-être est-ce une histoire d'OS ? il est vrai que je tourne sous un vieux XP pro SP3 ...
Pourtant j'ai beau faire plein d'autres essais, Firefox est toujours plus lent que ses copains. C'est très saccadé.

Merci quand même pour ton test. Je vais voir ce que ça donne avec les dernières versions alpha.

[kehezen]

Salut,

j'avais un problème plus ou moins similaire, sinon que je n'ai pas prêté attention au nombre d'éléments enfants d'un conteneur. Moi aussi je développe des sites web, et, régulièrement, les animations jquery saccadent de façon atroce, irrévocablement. Relancer le navigateur ne servait à rien, désactiver l'ensemble des modules non plus, réinstaller Firefox non plus, la seule solution que j'ai trouvée était de supprimer mon profil, et c'était indispensable pour pouvoir continuer à travailler.

Tout à l'heure, ça m'est arrivé (une fois de trop), et pour éviter de supprimer le profil (et donc réinstaller et reconfigurer tous mes modules), j'ai épluché celui-ci.

J'ai remarqué que supprimer le fichier content-prefs.sqlite suffisait à régler mon problème. Soyons clair : à ce problème, je n'y comprends RIEN, d'ailleurs si quelqu'un pouvait éclairer ma lanterne à ce sujet, ce serait lu avec gratitude...


En tout cas, ça règle mon problème, et peut-être le tien, Norris.

[calimo]

le fichier content-prefs.sqlite

Ce fichier stocke les préférences spécifiques aux site. Par exemple, le fait que tu as agrandi la taille des polices sur le site XXX. Il y a peut-être une préférence que tu as défini pour ton site et qui provoque ce ralentissement ?

As-tu conservé ce fichier ? Ce serait intéressant de savoir quelles étaient les préférences définies sur ton site, et ça permettrait peut-être de trouver l'origine du problème. Si tu as toujours le fichier dans la corbeille, sauve-le quelque part et parcours-le avec par exemple une extension comme SQLite Manager (n'hésite pas à nous demander de l'aide si tu ne t'y retrouves pas).

[kehezen]

Merci pour cette indication,

malheureusement je suis un barbare qui opère avec deux gourdins, et j'ai pas conservé ce fichier, en bon barbare qui se respecte.

Cependant, si le problème devait ressurgir, je le ferais. Je ne vois pas quelle préférence j'aurais pu coller à mon site - il m'arrive d'y faire un zoom [Ctrl + molette] de temps en temps, toujours annulé d'un [Ctrl + 0]...

à suivre

[thierrysudfr]

Bonsoirr,
Je rencontre le même problème de saccades, et à force de recherche et de tests, j'ai trouvé une solution : mes animations sont saccadés sur un fond dégradé. j'ai supprimé le dégradé, et miracle, tout fonctionne avec fluidité. C'est moins beau, mais ça marche.
Si ça peut servir....

Bonne soirée à tous