[CSS 2] Un simple :hover incompatible avec la majorité des navigateurs?! [Résolu]

[.alex.]

Bonjour à tous!
Je dois réaliser un projet tout en respectant certaines contraintes pour le moins restrictives!
=> Nous avons l'interdiction formelle d'utiliser tout autre langage que les grands classiques: HTML & CSS...
=> No javascript!

Ces restrictions étaient bien loin de me décourager car je pensais (à tort?) qu'il y avait tant d'autres moyens pour rendre son site dynamique...
Par exemple, histoire de donner un peu plus de dynamisme à mon menu, je tente quelque chose qui me semble a priori très simple, à savoir un :hover avec remplacement du fond par une image animée!

Et là... Surprise!!! Celà ne fonctionne que sous Firefox! =s
Incompatible avec les navigateurs suivants: IE, Chrome, Opera.
Mon étonnement est d'autant plus grand que la plupart des navigateurs précédemment mentionnés clament haut et fort leurs résultats aux tests ACID (incluant les recommandations CSS) et ce, alors qu'il ne sont même pas capables de gérer de simples :hover avec des images animées (GIF animé => Date de 1989).

J'ai réaliser l'animation moi-même et celle-ci est lue correctement lorsque je l'ouvre directement ("file:///X:/.../flip.gif") dans chacun des navigateurs.
C'est donc bel et bien l'inclusion dans un fichier CSS qui pose problème...
Conflit entre propriétés? Format GIF incompatible?

D'avance merci pour vos éclaircissements!
(J'ai joint les différents fichiers nécessaires à la compréhension de mon problème)

[Candygirl]

Hello,

Je n'ai malheureusement pas de solution mais juste quelques observations à partager.

Apparemment le problème provient du faite que ton animation ne se joue qu'une fois et non en boucle. Tous les navigateurs, sauf Firefox, montrent l'animation sur le premier :hover, puis plus, puisque l'image ne doit jouer l'animation qu'une seule fois et que c'est la même image pour tous. Firefox, lui, semble considérer qu'elle est "rechargée" à chaque :hover et donc rejoue l'animation.

J'avoue que ce comportement est plutôt ennuyeux...

[.alex.]

Envoyé par Candygirl

Hello,

Je n'ai malheureusement pas de solution mais juste quelques observations à partager.

Apparemment le problème provient du faite que ton animation ne se joue qu'une fois et non en boucle. Tous les navigateurs, sauf Firefox, montrent l'animation sur le premier :hover, puis plus, puisque l'image ne doit jouer l'animation qu'une seule fois et que c'est la même image pour tous. Firefox, lui, semble considérer qu'elle est "rechargée" à chaque :hover et donc rejoue l'animation.

J'avoue que ce comportement est plutôt ennuyeux...

Effectivement, le problème provient bel et bien de la gestion du cache de chacun des navigateurs!
Apparemment, la majorité des éditeurs ont considéré qu'il était préférable que l'animation GIF, une fois chargée dans le cache, ne soit jouée que le nombre de fois strictement prévues par l'animation... jusqu'à ce qu'elle soit à nouveau chargée! Alors que les développeurs de chez mozilla ont préféré une solution qui me semble beaucoup plus réfléchie, à savoir: prévoir un comportement différent lorsque l'animation se trouve dans une balise amenée à être affichée et masquée plusieurs fois de suite (:hover).
Donc, un grand bravo aux développeurs de chez mozilla!
Quant aux autres éditeurs... ben... je ne sais pas trop quoi en penser!
Il faut dire que les recommandations du W3C concernant le pseudo-format :hover sont loin d'être exhaustives... et puis, qui sait, peut-être d'autres motifs ont-ils incités certains éditeurs à ne pas prendre en compte ce cas de figure.
Bref, cela demeurera probablement un mystère!
Merci à toi Candygirl!