Discussion :

[Delprog]

Bonjour,

Certains ont déjà du le constater mais il y a des gros problèmes de fluidité dans IE7 lors du traitement des :hover en CSS2. Il suffit de regarder les performances de la machine au moment de survoler les éléments concernés, ...c'est affligeant.

Dans tous les autres navigateurs, aucun problème.

Je ne trouve décidément pas de solution et c'est très embêtant.
Un exemple tout bête sur un objet input text d'un formulaire :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
#fmContact INPUT[type="text"] {
  background-color:#FFFFFF;
  border:1px solid #B3B3B3;
  color:#000066;
  font-family:Arial, Helvetica, sans-serif;
  font-size:12px;
  font-weight:normal;
}
 
#fmContact INPUT[type="text"]:hover {
  border: 1px solid #FF0000;
}

Ce traitement tout bête est d'une lenteur inacceptable dans IE7.

Je précise que le fait de cibler directement l'objet input en question dans la CSS n'a aucun effet.

Alors la plupart du temps les réponses que l'on trouve se concentrent sur les hover avec des images, je ne rencontre pas de problème avec ce système, ça fonctionne très bien en utilisant une seule image pour tous les états et en déplaçant le background-position en CSS.

Non, le problème reste vraiment sur des états CSS tout bêtes.

Si quelqu'un a une solution, je suis largement preneur

Merci,

Benjamin.

[Delprog]

Bon, je m'auto-répond

Je pense que je ne suis pas le seul à me confronter à ça, surtout avec la révolution PNG, donc je partage la solution, je sais pas si c'est suffisamment important pour qu'un modo récupère la solution et l'intègre dans une FAQ ou je ne sais quoi, mais n'hésitez pas !! :-)

En fait, IE7 gère au final très mal les PNG, mais ça nous le savions déjà, et il suffit de faire un effet de fondu sur un PNG pour s'en rendre compte, c'est le massacre.

Mais en fait, c'est encore pire que ça, plus le site est chargé de background en PNG qui se répètent (aussi petits qu'ils soient, oui même 200 octets), plus les hover seront lents dans les formulaires. Et même chose pour les effets avec ajax+librairie genre scriptaculous.

Résultat, j'ai converti tout ce que je pouvais en jpg, et croyez moi, même les fonds de menu de 1x20px qui se répètent y jouent beaucoup.

Ca alourdit légèrement le site (les tailles des images en jpg-100 sont doublées, 200o > 400o, 4ko > 9ko) mais la fluidité s'en ressent immédiatement.

Petite précision et pas des moindre, j'ai testé tout ça dans la bêta d'IE8 et visiblement le problème est corrigé, ainsi que mal d'autres choses qui n'étaient pas bien gérées par le navigateur (ex: focus en css).


Cya,

Benjamin.