28211 sujets

CSS et mise en forme, CSS3

[Résolu..] Survol et sablier sous IE

Bonjour à vous !

{EDIT}
Le sujet à un peu évolué, j'en profite pour mettre à jour le post initial, je reprend ce que dis Siel plus bas:

http://www.rpgamers-fr.com/temp/ieboulet.htm

Comme vous pouvez le voir (ou pas), le passage de la souris d'une position hors des liens à une position à l'intérieur des liens fait apparaître, sous IE, un très léger, rapide curseur de chargement, comme s'il n'allait pas chercher dans son cache.

...Mais contrairement aux réponses initiales, nous pouvons voir que sur cet exemple, il n'y a aucun "a:hover" d'appelé.
Uniquement un lien "a" possedant un paramètre "background-image"...

Quelqu'un aurait une explication, une solution pour empecher ce "chargement", cette apparition du sablier ?
{/EDIT}







Post initial:
_____________
Je viens de rencontrer un problème mineur sous IE mais néanmoins assez gênant pour les petites config (ou bien les moniteurs à fréquence de rafraichissement rapide).

Voyez sur ce site de test: http://www.rpgamers-fr.com/rpgamers3
(autre page de test: http://www.rpgamers-fr.com/rpgamers3/tests.htm)

Le menu de gauche fonctionne sous forme de <li><a><img /></a></li> avec une image de fond qui se modifie grâce à la méthode "hover" (le petit carré).
Maintenant, si on passe la souris sur chacun des boutons, sous IE, on remarquera un léger moment de sablier, même après que toutes les images aient été mises en cache.

Bizarrement, ça le fait plus sur certaines machines que d'autres...
Alors j'ai essayé de virer les propriétés "opacity" "filter", mais ça ne résoud pas, je les ai remis pour la peine...
...Je ne comprend vraiment pas, j'ai bien l'impression que le changement de background-image sur le hover pose ce genre d'inconvénient sous IE...

Est-ce un problème connu ? Y a t'il un remède ?
(Je précise qu'il n'y a aucun JS sur la page)
Merci d'avance ! Smiley cligne
Modifié par Nigel (05 Nov 2005 - 18:29)
Bonjour aussi,

Je suis co-webmaster (bien que je touche pas au design) et je confirme le soucis. Assez gênant selon moi, et particulièrement visible sur ma machine.
Bonjour,

C'est un bug IE6, qui n'utilise pas son cache pour les images utilisées en fond d'élément. Du coup chaque :hover impose une requête http vers le serveur. C'est très lourd pour le client (sablier et clignotement) mais aussi pour le serveur bien sur.
Plus de détails et solutions par ici.
Ah super, merci, je regarde ça !
...En effet c'est très ennuyeux si à chaque survol le visiteur envoie une requête http au serveur... >_<
Je comprend mieux la réaction...

Bon je vais voir pour paramétrer mon serveur une bonne fois pour toute. Smiley cligne
bon c'est impossible, étant sur un serveur mutualisé sous OVH, ils n'activent pas le mod_expires...
Alors je tente de régler ça de manière CSS.

Voici mon ancien code:
Deux images, une version "on" et une version "off" la méthode hover change juste d'image.
	
a.index {
background-image:url(images/btn_index_off.gif);
background-repeat:no-repeat;
background-position:left top;
}

a.index:hover,a.index:active {
background-image:url(images/btn_index_on.gif);
}


Et voici le nouveau:
Je n'ai qu'une image contenant les deux version (on et off), je ne change que la position de l'image dans le hover

a.test{
background-image:url(images/btn_medias.gif);
background-repeat:no-repeat;background-position:3px -14px;
}

a.test:hover {background-position:3px 2px;}


Je pensais résoudre de cette façon, mais apparemment, le sablier est toujours présent !!

Je précise que je ne peux pas appliquer la méthode décrite sur le site plus haut, malheureusement...
...Alors là on ne comprend plus rien du tout !!
J'ai viré le :hover, mais le sablier est toujours là !!

il suffit qu'il y ait un "background-image" dans le "a" simplement pour que ça le fasse !!
Argh, mais qu'est ce donc que ce délire ? O_o

Comme on a avancé un peu sur la problématique,
Voici un post de Sielfried à ce propos sur le forum hfr
Modifié par Nigel (01 Nov 2005 - 11:58)
Up. Smiley sweatdrop

Pour ceux qui auraient la flemme de lire tout depuis le début du topic (un peu confus tout ça), je résume.

http://www.rpgamers-fr.com/temp/ieboulet.htm

Comme vous pouvez le voir (ou pas), le passage de la souris d'une position hors des liens à une position à l'intérieur des liens fait apparaître, sous IE, un très léger, rapide curseur de chargement, comme s'il n'allait pas chercher dans son cache.

Quelqu'un aurait une explication ?
Modifié par siel (01 Nov 2005 - 17:26)
J'ai essayé d'explique ceci mais ce n'était pas clair Smiley cligne ? : au survol de la souris il ne doit pas y avoir d'image du tout c'est à dire 
a:hover {
 background-image: none;
 ....
 }
Ainsi il n'ira pas chercher d'image sur le serveur. L'astuce que je donnais plus haut consiste à mettre une image sur un élément, une autre image sur l'élément a, puis à la supprimer avec le :hover.
Oui, j'ai bien essayé, mais ça ne marche pas plus. Smiley cligne
...Malheureusement !!

En fait, comme nous l'avons constaté plus haut, le problème survient dès qu'il y a un background-image sur le "a", on a beau ajouter ou ne rien mettre (none) pour le ":hover", le sablier subsiste et résiste !!

Ou bien je n'ai pas encore tout à fait compris...
http://www.rpgamers-fr.com/temp/ieboulet.htm
Voici le test, et le sablier existe bien sous IE. Smiley ohwell
Modifié par Nigel (01 Nov 2005 - 21:14)
Pour moi pas de clignotement ni sablier avec IE6 sur votre dernière page de test (ce qui n'était pas le cas avec la précédente version de votre page de test).
A l'occasion je vérifie sur mon serveur pour comptabiliser les transactions http.
A+
Ok merci à vous.
Bon, je viens de faire le test au boulot, car à vrai dire, seul Siel voyait vraiment ce fameux sablier, je ne pouvais pas vraiment me rendre compte.
Et bien, au boulot, oui, je vois ce sablier. :|

La seule différence notable que j'ai entre ces deux machines, c'est l'OS. Chez moi je suis sous win2k, au boulot, je suis sous XP pro...

Alors bon peu importe, l'idée est qu'il faut que je trouve un moyen de régler ce problème.
Alors... Sur la page de test actuelle, toujours celle-ci: http://www.rpgamers-fr.com/temp/ieboulet.htm
Je remarque personnellement ce coup-là un sablier quand mon curseur sort de la zone du lien Smiley sweatdrop

A contrario, sur http://www.rpgamers-fr.com/rpgamers3/
le sablier apparait en entrée et en sortie de la zone du lien, mais j'utiliserai la méthode que j'utilise sur la quatrième rubrique "medias", elle ne fait apparaitre un sablier qu'en sortie, c'est déjà ça. Smiley smile


Maintenant, reste à trouver pourquoi ce sablier apparait en sortie d'une zone de lien... Smiley confus
Mea culpa, je vous ai induit en erreur.
Le sablier n'est pas toujours présent (en fonction de condition de puissance machine, bande passante...), mais vérification faite, IE lance bien une requête http pour demander l'image lorsque l'on passe de l'état :hover à l'état normal (séquence où le navigateur doit afficher l'image à nouveau). Le serveur fait une réponse 304 (not modified) et ne renvoie pas l'image, mais il y a bel et bien des échanges client serveur inutiles. Une maigre consolation, l'utilisation de a:hover {background-image: none} divise le nombre d'échange par 2.

Je ne vois pas, pour l'instant, d'autre solution que le paramétrage serveur.

Désolé de pour mon erreur et de l'issue fatale dans laquelle vous vous trouvez Smiley decu
Argh merci pour tout !
Merci pour ces explications techniques...
C'est vraiment fâcheux ce que nous fait IE. -_-

Le paramétrage étant impossible à cause de mon hébergement mutualisé, je vais devoir passer en javascript.


Mais vous imaginez quand même que cela veut dire que tous les menus CSS comprenant un background-image sur le "a" posent problème ?!
C'est affolant !!
a écrit :
Mais vous imaginez quand même que cela veut dire que tous les menus CSS comprenant un background-image sur le "a" posent problème ?!
C'est affolant !!
Ce n'est pas le seul bug très gênant de IE ! Par ailleurs le bug apparaît pour un paramétrage précis de IE qui n'est pas le paramétrage par défaut à l'installation. Du coup beaucoup de webmasters ne le voit pas ou l'accepte ainsi.
Enfin beaucoup d'hébergements mutualisés permettent le paramétrage serveur dans le .htaccess.
Hmm... justement, mon paramétrage IE est par défaut là où je perçois le chargement. Smiley smile
Mais à côté, mon collègue qui lui aussi est avec le paramétrage par défaut d'IE ne voit pas ce sablier...

Pour les hébergements mutualisés, je ne sais pas, en tout cas OVH (qui est pour moi un excellent hébergeur) ne le propose pas... du moins, ils n'activent pas le mod_expires.


Résolu par Javascript. tant pis.
Modifié par Nigel (05 Nov 2005 - 18:29)
J'ai un serveur dédié chez OVH, je pense donc pouvoir activer le mod_expires... Par contre je ne comprend pas trop comment faire (je suis une buse en admin serveur).
Yaurait-il quelqu'un pour m'expliquer ? Le lien de ultra-fluide.com ne m'aide pas beaucoup Smiley decu
Sujet clos
Aller à