La police anti-aliasing des problèmes avec jQuery.fadeIn dans IE8?

Je suis cogner ma tête contre le mur avec un problème que je vais avoir dans IE8. Je suis l'aide de la fonction fadeIn jQuery pour rendre le contenu du site fondu. Cela fonctionne parfaitement bien dans toutes les autres navigateurs, mais quand le fadeIn finitions dans IE8 la police anti-aliasing semble changer à l'origine le texte à déplacer légèrement.

Vous pouvez voir le site à http://www.ipulse.biz. Le code que j'utilise pour provoquer le fondu est tout simple, comme illustré ci-dessous.

var showContent = function() {

  $('#content div:first').fadeIn(1000);

  $('#navigation').fadeIn(500);

} //end showContent

Le code est appelé par une fonction setInterval, si cela fait une différence.

C'est vrai chic que vous avez utilisé les réponses sur votre site, mais n'accepte pas de réponse ici. Allez, redonner à la communauté pendant quelques secondes.

OriginalL'auteur | 2009-07-03

17

Comme expliqué précédemment, cela est causé par Cleartype dans Internet Explorer - mais il y a une solution qui permettra au moins de faire de cette question tolérable.
```
$('#navigation').fadeIn(500, function(){
    if ($.browser.msie){this.style.removeAttribute('filter');}
});
```
Qui devrait forcer, c'est à dire clair de la transparence et de rendre ainsi le texte normalement.

Il n'est toujours pas assez, malheureusement.

+1 Fonctionne assez fine une fois l'animation terminée.

OriginalL'auteur Soleil
7

Ceci est causé par ClearType de disparaître dans Internet Explorer, ce qui est assez ennuyeux.

http://blog.bmn.name/2008/03/jquery-fadeinfadeout-ie-cleartype-glitch/

ce n'est pas limité à l'plugin jquery. de tout temps, l'opacité est utilisé dans IE, les polices de caractères perdent leur anti-aliasing dans la section translucide
Yep, c'est correct. Cependant, depuis Philippe est clairement à l'aide de JQuery, j'ai senti qu'un lien avec une solution à cela, JQuery, était bon.
Malheureusement, j'ai déjà essayé cette solution et il ne semble pas fonctionner. En fait, il provoque le problème de se produire dans IE7 en plus de IE8 (qui n'était pas le cas avant).
Cela fonctionne, mais malheureusement il y a un peu léger décalage du texte lorsque le filtre est supprimé (en utilisant 'fadeTo" plutôt que de "fadeIn'). Je suppose que c'est inévitable.

OriginalL'auteur Deniz Dogan
1

Je sais que ma réponse arrive un peu trop tard, mais que diriez-thinkin' vice-versa?
IE7 /IE8 ne gardez pas d'anti-alias pour un texte ombré, donc, si vous avez une seule couleur de fond (noir par exemple), vous pouvez créer une div vide, background-color: #000; position: absolute; display:block; et il le mettre sur l'élément de texte.

Si votre demande est d'avoir un texte FadeIn effet, vous avez juste à appliquer le FadeOut pour le "noir" de la couche sur elle, et vice-versa.

De cette façon, le texte de l'anti-alias est conservé intact.

OriginalL'auteur
1

Désolé pour la réponse tardive, mais j'ai eu le même problème et était à la recherche d'une solution quand je suis tombé sur ce sujet. Je ne trouvais pas une solution de travail dans cette rubrique, mais j'ai trouvé une solution simple qui semble résoudre le problème à la perfection.

En place de l'aide:

$('.élément").fadeIn(500)

utilisation fadeTo et à la décoloration, à 99%:

$('.élément").fadeTo(500, 0.99)

Vous ne voyez pas une différence de 1%, et parce qu'il n'atteint pas 100% d'opacité, c'est à dire ne semble pas s'appliquer cleartype.

Laissez-moi savoir si cela fonctionne pour n'importe qui d'autre.

Intéressant, mais complètement à l'opposé de ce que la question initiale a été demandé. Besoin d'appliquer cleartype, pas de le supprimer.

OriginalL'auteur Gregory Bolkenstijn
0

il doit être appelée après l'effet de fondu est terminé (par exemple 500ms après etc.)

OriginalL'auteur
0

J'ai résolu ce problème en ajoutant dans le css pour le texte

filter:alpha(opacity=99);

cela n'a d'impact que ie. Je reçois toujours un petit décalage dans ie7, mais c'est exceptable.

Vous pouvez le constater ici http://thriive.com.au/

OriginalL'auteur THRIVE
0

Trouvé une solution pour ce problème.

http://jquery.malsup.com/fadetest.html

OriginalL'auteur Lars
0

J'ai une solution: Créer un autre DIV sur votre DOM comme une superposition, et de l'exécution de vos fonctions de fondu sur cette DIV. Il apparaîtra comme si le contenu est en train de disparaître. Cette approche est également plus performant, que vous êtes seulement à la décoloration d'une seule DIV au lieu de plusieurs éléments. Voici un exemple:
```
$('#containeroverlay').width($('#container').width()).height($('#container').height()).fadeIn('normal', function() {
    //Step 1: change your content underneath the hidden div
    //Step 2: hide the overlay
    $('#containeroverlay').fadeOut('normal');
})
 
```
OriginalL'auteur Joshua
0

J'ai aussi eu des problèmes avec la transparence des PNG passées de la zone, mais la combinaison de l'au-dessus de JS pour enlever le filtre d'attribut avec un petit peu de css de l'image noir "frontière" a disparu alors que la décoloration.

Est mon cas, c'était un élément qui utilise un css sprite, donc je n'avais que de l'ajouter à mon sprite classe dans le css:
```
.sprite{
    background-image: url('/images/sprite.png');
    background-repeat: no-repeat;
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr=#00FFFFFF,startColorStr=#00FFFFFF)"; /* IE8 */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00FFFFFF',startColorStr='#00FFFFFF');   /* IE6 & 7 */
    zoom: 1;
}
```
OriginalL'auteur Koen.
0

Je ne suis pas à l'aide de JQuery, mais je l'ai à moitié résolu ce problème en utilisant le code CSS suivant:
```
div
{
    opacity: .15;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=15)";
}
div:hover
{
    opacity: 1;
    -ms-filter:"";
}
```
Entièrement opaque texte anti-aliasé, mais l'translucide n'est-ce pas. Ce n'est pas un énorme problème pour l'translucide texte.

OriginalL'auteur Charlie

Vous devez vous connecter pour publier un commentaire.