CSS Hover & onmouseover/out causant 15-20% d'utilisation du processeur dans Internet Explorer

Y at-il une raison pour laquelle Internet Explorer (IE7 dans mon cas) devient lent et mange beaucoup de temps CPU lors de l'utilisation de la commande CSS: hover ou en utilisant onmouseover/onmouseout? Je ne fais vraiment rien de complexe, et ma page n'est pas particulièrement grande. Lorsque je déplace ma souris ailleurs sur la page (où rien ne change), iexplore.exe reste à 0%, mais une fois que je commence à déplacer un élément avec onmouseover/onmouseout ou une classe CSS hover attachée, les choses deviennent vraiment lentes et lentes et l'utilisation du processeur devient élevée.CSS Hover & onmouseover/out causant 15-20% d'utilisation du processeur dans Internet Explorer

La page fonctionne parfaitement bien dans Firefox, Chrome et Safari avec pas de problèmes de vitesse/lenteur que ce soit.

Conseils/Idées?

Edit: Le onmouseover/onmouseout est sur < tr> tags (mettant en évidence une ligne dans une grille); le CSS: hover est utilisé sur < a> balises échangeant une URL d'arrière-plan.

Source

2009-09-23 Alex

Vous ne faites rien de compliqué, mais vous faites quelque chose. Alors, pouvez-vous montrer ce que vous faites? Si vous le faites avec CSS, cela aura-t-il le même effet? –

Oui, les deux CSS et OnMouseOver/OnMouseOut ont le même résultat. La seule chose que je peux penser - j'ai beaucoup d'images de fond CSS dans ma page et pour différents éléments (peut-être environ 50 au total). Mais cela ne pose aucun problème dans les autres navigateurs. – Alex

Vous avez besoin d'un retournement CSS non-scintillant (qui ne déclenche pas de signaux continus «stationnaire» à chaque mouvement de souris minuscule). Échanger des images sur hover ne fonctionne généralement pas très bien, en particulier dans IE.

La meilleure façon de le faire sans une bibliothèque Javascript est d'avoir le choix « hover » l'image en arrière-plan à l'élément sous celui que vous êtes planant au-dessus, et la non-vol stationnaire l'image comme arrière-plan de l'élément devant.

Ensuite, pour l'Etat CSS :hover de l'élément devant, régler background-image: none; background-color: transparent; sorte que l'image « en vol stationnaire » souhaité dans l'élément sous-jacent est révélé.

Vérifiez le code source pour ce example non-flicker CSS rollover. En fonction de votre balisage, il se peut que vous deviez ajuster la valeur z-index pour obtenir l'élément supérieur 'en avant' du sous-jacent.

Source

2009-09-23 10:07:45

ne pas faire quoi que ce soit complexe

Eh bien, ce sont vous faire? Je l'ai vu juste en changeant la couleur de fond tr. IE ne semble pas être bon à cela.

Source

2009-09-23 00:23:30 lod3n

C'est (sur * tr *) où j'ai le onmousover/onmousout. C'est une grille et je dois mettre en évidence la rangée en quelque sorte. Le CSS: hover est sur les balises d'ancrage, en changeant une URL d'arrière-plan autour quand survolé. – Alex

Ne changez pas l'image d'arrière-plan sur le tr, c'est la pire performance. Changez simplement la couleur, ça va beaucoup améliorer les choses. – lod3n

Désolé, je n'étais pas clair. Le changement de tr n'est en fait qu'un changement de couleur. Les balises d'ancrage sont celles avec l'image. – Alex

CSS Hover & onmouseover/out causant 15-20% d'utilisation du processeur dans Internet Explorer

Répondre

Questions connexes