animate opacity rendu deplorable du texte sous IE

**SpaceFrog** · 31/05/2010, 13h26

Bonjour,

j'essaye de mettre en place un fadeIn ou animate Opactity sur un element conteant du texte ...
cf image jointe ...

sous Ffx aucun souci le rendu est normal..
J'ai bien vu un truc pour IE6 disant qu'il faut supprimer le filter ...
mais d'une part là c'est sous IE8 et d'autre part j'ai testé sasn succès

La police c'est verdana ou arial dons classique ...

**SpaceFrog** · 31/05/2010, 16h51

Bon j'ai testé plusieurs choses ...

j'ai tenté de réattribuer la taille de la police lors du fadeIn ou de l'animate.
IE fadeIn avec un aliasing de la mort et lisse la police en fin d'animation

J'ai finalement opté pour un background-color: white sur l'element contenant le texte, et ça fonctionne dans mon cas de figure .

Il serait tout de même intéressant de trouver une parade lorsque le fond n'est pas uni ...

**danielhagnoul** · 03/06/2010, 21h01

Bonsoir.

Je crois me souvenir avoir déjà traité un problème similaire et l'avoir résolu, sauf erreur de mémoire, en fixant pour chaque élément DOM les propriétés CSS color et background-color dans la feuille de style. Il faut que ces propriétés CSS existent avant le lancement de l'animation.

**SpaceFrog** · 03/06/2010, 23h08

donc pas possible avec transparence ?

**danielhagnoul** · 04/06/2010, 00h08

Bonsoir.

Exemple (Il fonctionne bien sous IE8, pour le reste je ne dispose pas des pièces de musée

) :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
<!doctype html>
<html lang="fr">
<head>
	<meta charset="utf-8">
	<meta name="Author" content="Daniel Hagnoul">
	<meta name="description" content="Page type">
	<title>col and row rule</title>
	<style>
		/* BASE */
		body {
			background-color:#dcdcdc;
			color:#000000;
			font-family:sans-serif;
			font-size:medium;
			font-style:normal;
			font-weight:normal;
			line-height:normal;
			letter-spacing:normal;
		}
		h1,h2,h3,h4,h5 {
			font-family:serif;
		}
		div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img {
			margin:0px;
			padding:0px;
		}
		p {
			padding:6px;
		}
		ul,ol,dl {
			list-style:none;
			padding-left:6px;
			padding-top:6px;
		}
		li {
			padding-bottom:6px;
		}
		div#conteneur {
			width:95%;
			margin:12px auto;
			padding:6px;
			background-color:#FFFFFF;
			color:#000000;
			border:1px solid #666666;
			font-size:0.8em;
		}		
 
		/* TEST */
		#mydiv {
			height:450px;
			width:450px;
			margin:12px;
			padding:6px;
			color:blue;
			background-color:lightGreen;
			font-size:medium;
			border:1px solid gray;
		}
	</style>
	<script charset="utf-8" src="../lib/jqueryui/js/jquery-1.4.2.min.js"></script>
 	<script>
		$(function(){
			$("p, img", "#mydiv").fadeTo(2000, 0.5);
			$("#mydiv span").fadeTo(2000, 1.0);
		});
	</script>
</head>
<body>
	<div id="conteneur">
		<div id="mydiv">
			<p>Un mot pour remplir !</p>
			<img src="../images/imageTest.png"/>
			<br/>
			<span style="display:none; color:red; font-size:200%;">Un contenu quelconque</span>
		</div>
	</div>
</body>  
</html>

**SpaceFrog** · 04/06/2010, 08h26

Avec un copier coller de ton exemple voici ce que j'obtiens sous IE8... (cf image jointe)
Cela ne fonctionne donc que si m'on, mets le même fond sur l'objet qui fade que sur l'arrière plan

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<span style="display:none; color:red; font-size:200%;background-color:lightgreen;">Un contenu quelconque</span>

et condamne donc a un fond uni (voir une image identique).

**danielhagnoul** · 04/06/2010, 09h18

Bonjour.

Oui, j'ai oublié d'ajouter le fond au tag span. Mais avec ou sans (c'est pourquoi je ne m'en suis pas aperçu

), sous IE8 j'obtiens un résultat correct. Voici trois images-écran avec zoom 100 %, 400 %, et maximum.

[EDIT 09:30] Et avec un fond bleu :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<span style="display:none; color:red; background-color:lightBlue; font-size:200%; padding:6px; border:1px solid grey">Un contenu quelconque</span>

http://danielhagnoul.developpez.com/...leuZoom400.jpg

[EDIT 09:50] Avec un fond complexe :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<span style="display:none; color:red; background-color:whiteSmoke; background-image:url('../images/logoDVP.gif'); font-size:200%; padding:6px; border:1px solid grey">Un contenu quelconque</span>

http://danielhagnoul.developpez.com/...ondComplex.jpg

**SpaceFrog** · 04/06/2010, 09h37

C'est curieux car sans le fond sur le span le rendu est null chez moi sous IE8

Visiblement un souci de filter sous IE,car si je supprime le filter en fin d'animation:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

	$("#mydiv span").fadeTo(2000, 1.0,function(){$("#mydiv span").css({'filter':''})});

la police est pourrie pendant l'animation mais se redevient correcte à la fin

J'ai également tenté de mettre une image transparente en background sans succès.
Cela fonctionne avec une image de couleur

**danielhagnoul** · 04/06/2010, 10h16

Bonjour.

Je ne connaissais pas filter qui est spécifique à IE. Mais une rapide recherche me dit que :

Les filtres sont conçus pour les éléments HTML suivants (pour les autres, ils ne fonctionnent pas):

body (L'effet affecte la totalité de la page affichée)
button (L'effet affecte la surface pouvant être cliquée)
div (L'effet affecte le passage en relation avec les mentions de feuilles de style width: et/ou height: et/ou position

img (L'effet affecte le graphique référencé)
input (L'effet affecte le champ de saisie)
marquee (L'effet affecte le texte déroulant)
span (L'effet affecte le passage en relation avec les mentions de feuilles de style width: et/ou height: et/ou position

table (L'effet affecte le tableau)
td (L'effet affecte la cellule de données d'un tableau)
textarea (L'effet affecte le champ de saisie à plusieurs lignes)
tfoot (L'effet affecte le pied d'un tableau)
th (L'effet affecte la rangée d'entête d'un tableau)
thead (L'effet affecte l'entête d'un tableau)
tr (L'effet affecte la rangée d'un tableau)

Mais cela ne semble pas fonctionner avec le tag span.

Donc, j'ai testé avec le tag div :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<div style="display:none; color:red; background-color:whiteSmoke; background-image:url('../images/logoDVP.gif'); font-size:200%; padding:6px; border:1px solid grey">Un contenu quelconque</div>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
$("#mydiv div").fadeTo(2000, 1.0, function(){
	$(this).css('filter','Alpha(opacity=100, finishopacity=0, style=2)');
});

Et j'obtiens un beau résultat : http://danielhagnoul.developpez.com/...plexFilter.jpg

**SpaceFrog** · 04/06/2010, 10h32

Non, rien à faire j'ai toujours cette sorte d' aliasing de semi transparence affreux.

j'ai lu des choses sur zoom:1 qui améliorerait les choses mais toujours le même resultat.

**SpaceFrog** · 04/06/2010, 10h36

Accessoirement et légèrement hors sujet...

Ceci m'echappe:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
	$(function(){
			$("#mydiv p", "#mydiv").fadeTo(2000, 0.5);
			$("#mydiv div").fadeTo(2000, 1.1);
		});

comment se fait il que les objets soient instanciés ?
n'est-on pas obligé de passer par

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

 $(document).ready

**devyan** · 04/06/2010, 10h41

Bonjour,

Est-ce que par hasard tu n'aurais pas le lissage des polices à l'écran de désactivé sur ton PC ?

devyan.

**SpaceFrog** · 04/06/2010, 11h07

ce ne serait actif que sous IE et sur un fond transparent ???
ça m'etonnerais beaucoup
ou se trouve cette option ?

**devyan** · 04/06/2010, 11h25

Au temps pour moi

Il semble que le problème ne vienne pas de là ...

Mon ami

vient de me donner une réponse intéresante à la question "lissage polices IE8"

Une solution qui semble correspondre à ton besoin vient de là

**danielhagnoul** · 04/06/2010, 12h01

Envoyé par SpaceFrog

Accessoirement et légèrement hors sujet...

Ceci m'echappe:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
	$(function(){
			$("#mydiv p", "#mydiv").fadeTo(2000, 0.5);
			$("#mydiv div").fadeTo(2000, 1.1);
		});

comment se fait il que les objets soient instanciés ?
n'est-on pas obligé de passer par

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

 $(document).ready

C'est la forme abrégée ! Voir : Où dois-je poser mon $ ?

**SpaceFrog** · 04/06/2010, 12h08

un autre lien qui aborde le sujet ...
http://stackoverflow.com/questions/4...sing-cleartype

malheureusement le patch proposé ne règle pas le souci, il ne fait qu'appliquer un background-color par defaut #FFF à l'element ...

**danielhagnoul** · 04/06/2010, 12h10

Mon ordinateur, XP SP3, dans "Propriétés d'affichage", onglet "Apparence", bouton Effets, la case "utilisez ClearType" est activée !

**SpaceFrog** · 04/06/2010, 12h44

pareil Daniel cleartype activé ... le souci ne provient pas de là ...
le phenomène a lieu pendant la transition, car si je force un style en fin d'anim le lissage redevient correct

**danielhagnoul** · 04/06/2010, 21h21

Bonsoir.

Et en retirant l'attribut filter à l'ancienne ?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
$("#mydiv div").fadeTo(2000, 1.0, function(){
	this.style.removeAttribute('filter');
});

**SpaceFrog** · 04/06/2010, 22h12

Cela fonctionne mais à retardement, le filter etant supprimé dans le callback, le lissage se produit en fin d'animation, mais durant l'animation l'aliasing est présent.

animate opacity rendu deplorable du texte sous IE

jQuery

Discussions similaires

Partager

Partager