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).

animate opacity rendu deplorable du texte sous IE

jQuery

Vue hybride

Discussions similaires

Partager

Partager