Dépannage des problèmes jQuery/CSS

Question

J'ai une animation jQuery slideDown/slideUp qui fonctionne parfaitement dans IE9 et Firefox, mais qui est très saccadée dans Chrome. Le problème n'est pas présent si je supprime le fichier css, donc je suis assez confiant qu'il s'agit d'une interaction entre Chrome et le CSS de la page.

Y a-t-il des outils pour diagnostiquer la source de tels problèmes? Alternativement, y a-t-il des guides sur les interactions jQuery/CSS qui pourraient causer des animations saccadées; une liste de choses à ne pas faire en CSS?

Voici le pastebin pour le CSS, au cas où quelqu'un serait suffisamment familier avec les choses à ne pas faire en CSS pour identifier le coupable: http://pastebin.com/P68inpkx. Même si vous pouvez le faire, je suis toujours intéressé par la partie plus générale "comment diagnostiquer les problèmes de CSS" de la question pour que je puisse le faire moi-même à l'avenir.

Answer 1

Dans mon expérience, les dégradés -webkit et les ombres -webkit-box-shadow peuvent causer des problèmes de redessin, notamment dans Chrome. Si c'est le problème, je pense qu'il s'agit d'un problème de performance de rendu css de niveau inférieur.

En général, vous pouvez essayer (si approprié), les animations et transformations css3. Certaines peuvent être utilisées en mode 3d, ce qui permet une accélération matérielle, produisant une animation plus fluide. Je ne suis pas sûr que cela s'applique directement dans ce cas, mais je crois qu'il existe un plugin jQuery qui remplacera les animations standard de jQuery par des animations css3 (désolé pas de lien, le site du plugin est hors service).