[Résolu] Tremblement de la page suite à la MAJ Firefox 3.5 à 3.6

Bonjour à tous,

J'avoue que je ne savais pas vraiment où poster... du coup je poste ici.

Je viens tout juste de faire la mise à jour de Firefox de 3.5 à 3.6 et une amie m'avait signalé un problème de "tremblement" avec cette version, ce que j'ai donc pu vérifier moi-même.

Si vous avez cette version, vous pourrez vous en rendre compte en allant à l'adresse suivante : http://www.nosmoking-collection.com/. Il s'agit du site que j'ai développé pour ma sœur (elle est styliste), et c'est aussi le premier site que je développe de A à Z (avec pas mal de pompage par ci par là).

J'ai besoin de votre aide pour régler ce problème de tremblement. Visiblement Firefox affiche par intermittence les barres de défilement de page (en bas et à droite), ce qui n'était pas le cas avec la version précédente. C'est sans doute lié à une (ou plusieurs) propriété(s) CSS, mais j'ai un peu peur de casser toute la mise en page en tentant de régler le problème. Peut-être que certains d'entre vous ont une idée précise qui pourrait me guider ?

Je sais déjà que j'aurais dû tout faire en flottant et non en positionnement absolu, mais je m'en suis rendu compte une fois que tout était en place... et je n'ai pas trop eu le temps de tout reprendre. Mais ce sera peut-être l'occasion de le faire si ça pouvait régler mon problème.

Je sais également que l'affichage ne se fait pas correctement dans IE 6, sans doute à cause encore une fois du positionnement en absolu, mais aussi des animations jQuery (fading in/out par l'opacity) que j'aurais dû gérer en .fadeIn() et .fadeOut() (qui semble fonctionner sur tous les navigateurs). Mais j'aurais cependant perdu les capacités d'easing (purement esthétique cela dit...). La dernière version de jQuery propose peut-être une meilleure compatibilité (je ne me suis pas encore renseigné sur ce point).

Je suis bien entendu ouvert à toute autre proposition d'optimisation/amélioration.

Merci pour votre aide.
Modifié par Matworms (12 Feb 2010 - 17:33)

Bonjour,

Je n'ai pas FF sous la main, mais il y a peu de chance que ce soit CSS qui cause le problème, je regarderais plutôt du côté de JS.

Si tu dispose de la webdeveloper tool bar, tu peux désactiver simplement les scripts JS pour voir s'il y a un changement ou pas (sinon il faudra le faire en modifiant le code).

Comme je ne peux pas t'aider plus, je te conseille de faire des tests toi même en désactivant portion par portion les éléments qui pourraient causer le problème. Pour les CSS, il suffit par exemple de mettre en commentaire les parties à exclure, sauver, rafraichir la page.

Merci pour ta réponse Laurie-Anne.

Ca semble effectivement venir du code JS, qui fonctionnait bien jusqu'à présent. Ca ressemble bien à un problème lié à jQuery finalement... La page tremble lorsque les éléments de la page sont animés (déplacement des éléments d'une position à une autre). Je vais chercher dans cette direction.

Laurie-Anne a écrit :
Était-il vraiment nécessaire de créer un autre sujet ?

Non, mais j'ai pensé que certaines personnes ne regardent pas toutes les sections, et étant donné que mon problème est lié à JavaScript, j'ai supposé logique de poster dans la section dédiée.

Juste comme ça à vu de nez je pense que ça a un rapport avec un élément de ta page qui fait 100% de largeur ou de hauteur et qui zappe de cet état à une taille plus petite rapidement durant le chargement.

Bon c'est vraiment de la réponse au pif.

En tout cas c'est sûr qu'il y a une merde avec l'overflow quelque part, essaie un

*{
overflow: hidden;
}

juste pour voir si ça vient de là.

Et c'est js le responsable, c'est sûr mais c'est le css qu'il modifie qui créer ça.
Modifié par Skoua (05 Feb 2010 - 16:07)

Désolé pour la réponse un peu tardive.

Je ne modifie pas la taille des éléments, mais jQuery le fait peut-être, cela dit, il n'y avait aucun souci avec la version 3.5 de Firefox... (j'en ai pas non plus avec IE et Safari). En fait ça tremble à chaque fois que jQuery anime un élément.

J'avais essayé pour le

overflow: hidden;

mais ça ne règle pas le problème, en plus d'en rajouter !

Je vais essayer d'en savoir un peu plus sur le forum de jQuery.

Bonsoir,

Si je supprime div#spacer, qui sert apparemment à centrer verticalement le contenu, le problème disparait.
La manière un peu complexe dont tu gères le positionnement de ton contenu demande plusieurs calculs de tailles en pourcentages, pixels, en fonction du contenu, etc. Du coup, Firefox 3.6 semble s'emmêler les pinceaux.

J'opterais pour une méthode plus robuste pour le centrage vertical, qui a aussi l'intérêt de ne pas forcer à figer la hauteur de la page:
http://covertprestige.info/css/centrer-bloc/

PS: belle réalisation.
Modifié par Florent V. (08 Feb 2010 - 19:05)

Avec firebug ouvert, ça ne tremble plus (bon ça t'aide pas, mais c'est surprenant)
Par contre, en désactivant le

height: 50%

relatif au #spacer, le problème semble disparaître.
Je me suis bagarré une journée sur le même type de problème et la solution était assez ...ésotérique.
L'aspect est très élégant en tout cas.
Modifié par paolo (08 Feb 2010 - 22:51)

paolo a écrit :
Avec firebug ouvert, ça ne tremble plus (bon ça t'aide pas, mais c'est surprenant)

Sans doute parce qu'ouvrir le panneau Firebug fait apparaitre une barre de défilement vertical. Et que le problème est justement l'apparition/disparition rapide de cette barre. Si elle est déjà là, pas de souci.

Avec Firebug ouvert dans une fenêtre séparée, le problème se pose toujours.

Effectivement, je n'avais pas prêté attention à la barre..

Merci pour vos réponses, je vais tester la solution du tableau à cellule unique, qui a l'air effectivement plus stable. Je vais également en profiter pour refaire toute une partie de mon code, afin de rendre le site accessible avec ou sans JavaScript, et aussi de corriger les incompatibilités avec IE 6.

Je reviendrai vous faire un retour quand j'aurai terminé tout ça.

J'ai fait la modification pour le centrage vertical en utilisant un tableau à cellule unique, malheureusement le résultat est un peu différent de ce que j'avais imaginé : un beau div#content bien centré verticalement.

Le résultat est visible ici : http://www.nosmoking-collection.com/test/.

Il semblerait que le bord haut de div#content se place au centre (vertical) de l'écran. Peut-être parce que j'utilise ce code ?

#content {
  position: relative;
  ...
}

Mais j'ai besoin d'avoir div#content positionné car tous les autres éléments le sont à partir de sa position.

Je me souviens maintenant de la raison pour laquelle j'avais opté pour un div#spacer (source : http://d-graff.de/fricca/center.html), c'est parce qu'il est impératif que le logo (en haut à gauche) reste visible, même si la taille du viewport est inférieure à celle du contenu. Je ne sais pas si ce sera toujours le cas avec un tableau ? (Ça l'est sur l'exemple en tout cas)
Modifié par Matworms (11 Feb 2010 - 03:34)

Bonjour,

div#content est maintenant parfaitement centré en hauteur et en largeur, donc ça marche au poil. Le problème, c'est sans doute que div#content est un bloc de 930px de large et de très exactement 0px de haut.

À la base, le problème est un abus caractérisé de positionnement absolu. Le positionnement absolu semble nécessaire pour réaliser les effets de fondu, mais on pourrait faire sans en prévoyant bien les effets d'animation (calcul de la hauteur maximale entre deux blocs, min-height, utilisation temporaire du positionnement absolu). Peut-être un poil complexe.

Vu que ton site a une hauteur relativement fixe, et même si je n'encourage pas cette pratique, tu devrais pouvoir définir un height: 580px sur div#content, par exemple.

Florent V. a écrit :
Le problème, c'est sans doute que div#content est un bloc de 930px de large et de très exactement 0px de haut.

Effectivement, je n'avais pas pensé à ça... En lui donnant une hauteur de 558px, div#content est bien centré comme il faut. L'ensemble du site a une hauteur parfaitement fixe en fait, rien de fluide donc, mais ma sœur se soucie avant tout de l'aspect esthétique du site. C'est pour cette raison que j'ai adopté un CSS hyper rigide à base de position: absolute; partout.

Par contre, tout est bien remis à sa place, mais les navigateurs (en tout cas Firefox et Safari) affichent maintenant une barre de scrolling vertical. Modifier la valeur de height de div#content ne fait que déplacer le bloc vers le haut (ou le bas), mais la barre reste affichée.
Modifié par Matworms (11 Feb 2010 - 17:30)

Matworms a écrit :
L'ensemble du site a une hauteur parfaitement fixe en fait, rien de fluide

Ah?



;)

Je me suis sans doute mal exprimé. On peut effectivement agrandir la taille du texte (ou la réduire), mais le design n'est pas censé s'adapter à cette nouvelle taille, ce qui n'est d'ailleurs pas le cas, étant donné que les dimensions des div sont données en dur dans le code CSS.

Je pense avoir identifié la cause qui fait apparaître la barre de défilement vertical : une fois le site chargé, et juste après le premier clic sur un item du menu, div#content monte de quelques pixels, ça ne se produit qu'une fois. Et si je fais remonter manuellement la barre de défilement, elle redescend au premier changement de page.

Serait-ce lié à jQuery ? à FLIR ?
Modifié par Matworms (12 Feb 2010 - 07:20)

Matworms a écrit :
Je pense avoir identifié la cause qui fait apparaître la barre de défilement vertical : une fois le site chargé, et juste après le premier clic sur un item du menu, div#content monte de quelques pixels, ça ne se produit qu'une fois.

Il ne s'agirait pas plutôt des éléments rajoutés en JavaScript juste avant </body>? À savoir span#flir-refreshimages-test et div#flir-dpi-div-test. Si je les supprime avec Firebug, plus de barre de défilement intempestive.

Oui c'est bien ça, FLIR les ajoute automatiquement pendant le chargement de la page. J'ai modifié la source d'un des plugins de FLIR et en passant de "visibility: hidden;" à "display: none;" sur span#flir-refreshimages-test et tout rentre dans l'ordre. J'avais essayé de le faire aussi sur div#flir-dpi-div-test mais visiblement FLIR ne fonctionne plus si je le fais. Par contre le plugin fonctionne toujours, peut-être pas à 100%, mais la fonction que j'utilise fonctionne encore, et c'est bien tout ce que je lui demande.

Je suppose que le sujet est maintenant résolu, je vous remercie pour votre aide !
Modifié par Matworms (12 Feb 2010 - 17:27)