[Résolu] Filter:alpha et texte baveux

Hello,

Je viens de remarquer un bug d'affichage sous IE (6 et 7, WinXp) lors de l'utilisation du filter:alpha pour rendre un texte semi-transparent, et il s'avère qu'à partir du moment où un filter est appliqué sur un élément en gras (strong, font-weight:bold ou autre) ce texte devient baveux et moche.

http://www.rochephenix.com/files/2007/05/14/file5636-texte-baveux-ie-filter.jpg

Voici le simple code en question

<strong>Texte qui ne bave pas</strong>
<strong class="bave">Texte qui bave</strong>

.bave {
	filter:alpha(opacity=100);
	height:1%;
}
strong {
	font-weight:bold;
	display:block;
}

Je mets un filter en opacity 100 (complétement visible) pour montrer que c'est le simple fait d'appliquer un filter qui cause le bug (j'ai testé avec quelques autres filters existants, même problème).

Le height:1% est là pour trigger le hasLayout, sinon le filter n'a pas d'effet (zoom:1 ou n'importe quel autre trigger de hasLayout laisse le même effet baveux)

A noter aussi que si j'enlève le font-weight:bold et le remplace par un font-weight:normal, sous IE6 tout roule, mais sous IE7 je perds le lissage automatique des polices.

Si vous avez une astuce pour pouvoir empecher ce bavement moche, tout en gardant le filter, je suis preneur.

P.S : En pratique, j'étais en train de travailler sur un javascript d'effet d'apparition de texte en fondu, en faisant varier cette valeur d'opacité et une fois le script achevé (100%), j'ai vu que mes titres en gras étaient devenus comme ça...


Edit : Oh, à noter aussi, le problème apparait aussi si le strong en question hérite d'un parent qui lui même possède un filter...
Modifié par Tymlis (17 Aug 2007 - 14:31)

Je me réponds à moi même, la solution la voici la voila :

Il "suffit" de spécifier la couleur de fond des <strong> de la même couleur que la couleur de fond du parent, (ici, blanc) et le lissage redevient normal.