Transition opacity sur ie9 = OK ou KO ?... (Résolu, c'est KO !)

Bonjour,

Je m'évertue à essayer de trouver la syntaxe correcte pour appliquer une transition progressive en opacité sur un bloc div (et son contenu)...

ça fonctionne nickel sous chrome ou FF, mais pas sous IE9 ...

Pourtant, je croyais que IE9 appliquait le CSS3 correctement...

J'ai essayé plusieurs syntaxes, mais rien n'y fait, j'ai bien un changement d'opacité instantané au survol de la souris, mais pas de transition progressive...

Voilà ce que je mets dans ma feuille de styles :

.axe2 {
	position: absolute;
	display: block;
	left: 566px;
	top: 120px;
	height: 500px;
	width: 420px;
	background-image: url(../images/axe2_proisis.jpg);
	background-repeat:no-repeat;
	background-color: rgb(118,83,156);
	margin: 0px;
	padding: 0px;
	border: 4px solid #FFF;
	border-radius: 15px;
	opacity: 0.7;
	-moz-opacity: 0.7;
	-khtml-opacity: 0.7; 
	filter: alpha(opacity=70);
	transition: opacity 0.25s ease;
	-moz-transition: opacity 0.25s ease;
	-o-transition: opacity 0.25s ease;
	-webkit-transition: opacity 0.25s ease;
	-htm-transition: opacity 0.25s ease;
	-ms-transition:opacity 0.25s ease;
}
.axe2:hover{
	cursor:pointer;
	opacity: 1;
	-moz-opacity: 1;
	-khtml-opacity: 1; 
	filter: alpha(opacity=100);
	transition: opacity 0.25s ease;
	-moz-transition: opacity 0.25s ease;
	-o-transition: opacity 0.25s ease;
	-webkit-transition: opacity 0.25s ease;
	-htm-transition: opacity 0.25s ease;
	-ms-transition:opacity 0.25s ease;
}

IE9 ne tient pas ses promesses, ou ma syntaxe n'est pas bonne ?

Merci de votre aide
Modifié par proisis (26 Feb 2012 - 00:18)

Bonjour,

Déjà, tu appliques une opacité ainsi:
[code=css]opacity: 0.7;
-moz-opacity: 0.7;
-khtml-opacity: 0.7;
filter: alpha(opacity=70);
-moz-opacity n'est plus nécessaire depuis Firefox 0.8 (oui, avant la 1.0), il est grand temps de le virer. Je soupçonne -khtml-opacity d'être complètement inutile aussi. Donc deux lignes de gagnées. Quant à IE9, il inclut le support de opacity (sans préfixe), donc la propriété filter n'est pas nécessaire pour ce dernier.

Je commencerais donc par utiliser opacity uniquement.

Pour IE9, je ne sais pas si utiliser à la fois opacity et un filtre DirectX (filter) crée un conflit. C'est possible: il me semble que IE10 retirera le support de filter, mais qu'IE9 l'inclut encore.

Donc:
1. Soit utiliser opacity uniquement.
2. Soit utiliser opacity, et filter mais en appliquant ce dernier à IE7 et IE8 uniquement (via un commentaire conditionnel par exemple).
Moi j'appliquerais la première solution.

Pour ton utilisation des transitions, déclare transition en dernier (après les versions préfixées) plutôt qu'au début.

Bonjour.

En passant, il y a une alternative à opacity, il suffit d'utiliser RGBA (ou HSLA) au lieu de RGB pour définir la couleur,
par exemple :

background-color: rgba(118,83,156,0.7);

Le résultat est le même et ça t'épargne quelques lignes de code.

Ceci dit, je ne sais rien du support du RGBA (ou du HSLA) par les versions d'IE inférieures à 9.
Modifié par thierry (24 Feb 2012 - 15:47)

Salut fvsch,

filter fonctionne correctement en doublon avec opacity sous IE9, en fait celui-ci interprète l'un et l'autre à la suite... Mais comme le plus simple, c'est aussi le plus propre, j'ai procédé comme tu m'as conseillé (d'autant que j'ai pas envie de gérer 30000 versions de navigateurs) et j'ai cleané mon code comme indiqué.

Soit :

.axe2 {
	position: absolute;
	display: block;
	left: 566px;
	top: 120px;
	height: 500px;
	width: 420px;
	background-image: url(../images/axe2_proisis.jpg);
	background-repeat:no-repeat;
	background-color: rgb(118,83,156);
	margin: 0px;
	padding: 0px;
	border: 4px solid #FFF;
	border-radius: 15px;
	opacity: 0.7;
	-moz-transition: opacity 0.25s ease;
	-o-transition: opacity 0.25s ease;
	-webkit-transition: opacity 0.25s ease;
	-htm-transition: opacity 0.25s ease;
	-ms-transition:opacity 0.25s ease;
	transition: opacity 0.25s ease;
}
.axe2:hover{
	cursor:pointer;
	opacity: 1;
	-moz-transition: opacity 0.25s ease;
	-o-transition: opacity 0.25s ease;
	-webkit-transition: opacity 0.25s ease;
	-htm-transition: opacity 0.25s ease;
	-ms-transition:opacity 0.25s ease;
	transition: opacity 0.25s ease;
}

Mais cela ne change malheureusement pas la donne... IE9 ne gère pas la transition opacity sur un bloc div apparement...

D'ailleurs, je ne parviens pas à trouver de sites où on peut voir fonctionner cet effet dans IE9...

Salut Thierry,

Je vais essayer d'appliquer la transition sur le rgba en jouant sur le param de couche alpha...

J'ai oublié de vous dire merci...


Euh... Merci !

Bon, je viens de tester avec une transition rgba, mais c'est HS car je ne veux pas jouer sur l'opacité de ma couleur de fond uniquement, mais sur l'ensemble de ma div qui contient une image...

En l'occurence, mon seul pbm n'est pas de jouer sur la transparence (avec le code indiqué, ça fonctionne très bien (je veux dire pour tout le bloc div et son contenu)), mais c'est que la transition temporisée est fonctionnelle dans tous les navigateurs récents, sauf IE9...

D'autres pistes ?
Modifié par proisis (24 Feb 2012 - 16:23)

jQuery, on le laisse se débrouiller sur les questions des navigateurs ^^.

Looooll, c'est justement ce que je souhaite éviter...

Ca fonctionne en css3 partout, y'a pas de raisons d'y mettre du JS juste pour IE9, c'est énervant

(Je sais, ça a toujours été le pbm avec IE (toutes versions) qui ne respecte jamais vraiment les spécs W3C, mais quand même)
Modifié par proisis (24 Feb 2012 - 17:12)

Tu as vérifié que IE9 affiche bien ta page en mode de rendu standards/IE9 et pas en mode de compatibilité? (Voir les outils pour développeur d'IE.)

Et aussi:
- Inutile de définir la transition sur l'état :hover vu que tu l'as déjà définie sur l'élément.
- Vu que tu ne changes que l'opacité, autant définir une transition sur opacity plutôt que sur all.

.... A supprimer .... (l'édition de ce message a créé un nouveau post au lieu d'en modifier le contenu)
Modifié par proisis (25 Feb 2012 - 01:18)

J'ai regardé pour être certain, et a priori IE9 ne gère pas du tout les transitions css3 donc il faudra attendre IE10.

Quand tu bloques sur un problème portant sur des technologies un peu "cutting-edge", je te recommande de faire un petit tour sur http://caniuse.com

Oh, super ce lien, je ne connaissais pas ce site ! C'est parfait !

Merci Kaelig

Bon, je comprends mieux, à présent, pourquoi je ne parvenais pas à mes fins...

Je laisse mon code en place, ainsi, il devrait prendre vie dans la prochaine version d'IE...