WebDev-FR

Vous ne connaissez peut-être pas le terme de “CSS Jitter” même si vous avez probablement déjà croisé ce bug.

Ce phénomène se présente lors d’une mauvaise utilisation des styles sur les événements de type onMouseOver, par exemple lorsque vous réduisez la taille d’un élément au moment ou vous le survolez avec la souris : au moment où la souris passe au-dessus de l’objet, sa taille va réduire si bien que la souris peut potentiellement ne plus être au-dessus de l’élément donc celui-ci va reprendre sa taille initiale. Mais au moment où il reprend sa taille initiale, la souris se retrouve de nouveau au-dessus donc il va de nouveau être réduit. Bref on va assister à un effet de clignotement très désagréable.

Un exemple concret réalisé par CSS-Tricks : Jitter-Man ! Pour constater le phénomène, il suffit de vous rapprocher du bord du cadre rouge de Jitter-Man…

Quelques effets qui peuvent provoquer ce phénomène :

• l’ajout ou le retrait de gras
• les modifications sur les margin ou le padding
• les modifications sur la taille des bordures
• les modifications sur la hauteur ou la largeur
• les modifications sur la hauteur de ligne

Bref, l’essentiel est de faire attention et de placer l’événement onMouseOver sur quelque chose qui ne va pas voir ses dimensions être modifiées à cause de l’effet appliqué.

Source de l’article : CSS-Tricks.