Attribut style.color ne fonctionne pas sous chrome

Bonjour à tous !

Voici la situation :
J'ai un menu avec 5 items. Tous les items sont blancs par défaut, et quand on passe la souris dessus je change la couleur (1 couleur par item), la graisse, et l'espace entre les lettres. Rien de plus simple avec le CSS!
Le truc, c'est que pour mettre un peu d'animation, je fais appel à un plugin jQuery (il s'agit de textscan ) qui prend le dessus sur le CSS.

Du coup, pour conserver la couleur quand on passe la souris, et aussi quand on est dans la rubrique correspondante à l'item, je fais appel à une fonction que j'ai créée (voir plus bas). Tout fonctionne parfaitement sous Firefox, par contre sous Chrome et Safari le changement de couleur ne fonctionne pas.
J'ajoute aussi que quand on clique sur un item, ça doit appeler une fonction. Là c'est pareil: aucun problème avec FF, et sous Chrome faut cliquer 15 fois pour que ça marche.
Bien sûr la console de Chrome n'affiche aucune erreur... J'ai fait des tests, la fonction est bien appelée, et aucune ligne n'a l'air de le faire planter. Alors pourquoi est-ce que ma couleur de texte ne change pas ???

Voici la fonction en question:

function surline(action,id,avt){
	switch(id){
		case 'menu1':var id2='item1', color1='FFD600', color2='F2F1F0', type='main_menu';break;
		case 'menu2':var id2='item2', color1='D06E2C', color2='DDE9EC', type='main_menu';break;
		case 'menu3':var id2='item3', color1='ED1C24', color2='F2F1F0', type='main_menu';break;
		case 'menu4':var id2='item4', color1='88C540', color2='DDE9EC', type='main_menu';break;
		case 'menu5':var id2='item5', color1='A09090', color2='F2F1F0', type='main_menu';break;
		default:var id2='item1', color1='ED1C24', color2='F2F1F0', type='sub_menu';break;
	}
	var obj=document.getElementById(id2);
	if (type=='main_menu'){
                // Nouvelle couleur de texte
		if (action=="allume"){
			$("#"+id2).unspanize("anim");    // Ca c'est pour textscan
                        // Attribution de la couleur de texte
			obj.style.color='#'+color1;  
                        // pour bloquer textscan       
			block_anim_id1=id2;
                         // changement d'autres styles que la couleur                
			obj.style.fontWeight='600';       
			obj.style.letterSpacing='1px';
		}
                 // Remise de la couleur initiale
		else if (id2!=block_anim_id2 || (id2==block_anim_id2 && avt==1)){
			obj.style.color='#'+color2;
			$("#"+id2).spanize("anim",1);
			block_anim_id1='';
			obj.style.fontWeight='normal';
			obj.style.letterSpacing='2px';
		}
	}
	else{
		// Autre partie de la fonction pour autre chose qui fonctionne nickel sur tous les navigateurs testés
	}
}

Précision sur le CSS : le texte incriminé est dans une police que j'importe de cette manière:

@font-face{
	font-weight: normal;
	font-style: normal;
	font-family: 'GeoSansLight';
	src: url('../fonts/GeosansLight.eot?') format('eot'), url('../fonts/GeosansLight.ttf') format('truetype');
}

Je sais pas si ça change quelque chose à mon problème, on sait jamais...

Merci de m'aider !
Modifié par kopros (24 Nov 2011 - 18:56)

Hello,

Aucune idée du pourquoi du comment.

Trois remarques:
1. C'est vraiment que c'est quand même très dommage de faire de manière aussi prise de tête en JavaScript des choses qui se font simplement en CSS (avec un deuxième jeu de styles appliqués soit directement avec :hover, soit avec une classe spécifique qui peut être ajoutée en JS).
2. Le script JS utilisé (plugin jQuery Textgrad) est une saloperie sans nom qui bousille l'accessibilité de ton contenu. (La plupart des synthèses vocales vont lire le contenu SPAN par SPAN, donc un mot comme "bonjour" devient "b" "o" "n" "j" "o" "u" "r"... et c'est pas un bug, c'est normal de séparer à la lecture des contenus placés dans des éléments séparés.)
3. Dans Chrome et Safari, en utilisant Web Inspector, tu dois pouvoir tester pas mal de choses parmi lesquelles: a) est-ce que les SPAN sont correctement retirés du DOM? b) est-ce que l'application d'une couleur à un élément depuis la console, avec une syntaxe proche de celle utilisée dans ton script, fonctionne correctement? c) quelles sont les valeurs de element.style.color retournées pour divers éléments? (Pistes en vrac.)

Merci pour la réponse.
Si j'ai bien compris faut éviter textGrad, ce qui est dommage parce que j'aime bien l'effet de textScan et je ne connais rien d'autre qui fasse la même chose plus proprement, ni en js ni en css.

En attendant, je ne peux pas effectuer tout de suite les tests que tu m'as conseillé, ma machine test étant actuellement indisponible.

kopros a écrit :
je ne connais rien d'autre qui fasse la même chose plus proprement, ni en js ni en css

Il faudra attendre les filtres SVG (dont certains vont être portés en CSS) pour éventuellement faire ça proprement. (Pas sûr que ça soit possible en SVG mais c'est une piste à explorer.)