8
votes

Problèmes anti-aliasing de police avec jquery.fadein dans IE8?

Je me frappe la tête contre le mur avec une question que j'ai dans IE8. J'utilise la fonction Fadein sur JQuery pour rendre le contenu du site s'effacer complètement. Cela fonctionne parfaitement bien dans tous les autres navigateurs, mais lorsque la Fadein se termine dans IE8, la lutte anti-aliasing de police semble changer, ce qui entraîne le changement de texte.

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

Le code est appelé par une fonction seinterval, si cela fait toute différence. < / p>


1 commentaires

C'est vrai que vous avez utilisé les réponses sur votre site, mais que vous n'avez pas accepté une réponse ici. Allez, redonnez-vous à la communauté pendant quelques secondes.


10 Réponses :


7
votes

Ceci est causé par ClearType en train de disparaître dans Internet Explorer, qui est assez gênant.

http://blog.bmn.name/ 2008/03 / jQuery-Fadeinfadeout-Ie-ClearType-Glitch /


4 commentaires

Ce n'est pas limité au plugin JQuery. Toute opacité de temps est utilisée dans IE, les polices perdent leur anti-aliasing dans la section translucide


Oui, c'est correct. Cependant, comme Philip utilise clairement JQuery, j'ai senti qu'un lien avec une solution à JQuery, était bon.


Malheureusement, j'ai déjà essayé cette solution et cela ne semble pas fonctionner. En fait, il provoque que la question se produise dans IE7 en plus de IE8 (qui ne s'est pas produite auparavant).


Cela fonctionne, mais malheureusement, il y a un léger déplacement du texte lorsque le filtre est supprimé (en utilisant 'Fadeto' plutôt que 'Fadein'). Je suppose que cela est inévitable cependant.



0
votes

Il faut être appelé après que l'effet de fondu soit terminé (par exemple 500ms après etc.)


0 commentaires

1
votes

Je sais que ma réponse vient un peu trop tard, mais que diriez-vous de penser que le vice-versa? IE7 / IE8 ne conserve pas l'anti-alias pour le texte fané, donc si vous avez une seule couleur de couleur (E.G. Black), vous pouvez créer une DIV vide, couleur arrière-plan: # 000; Position: absolu; bloc de visualisation; et mettez-le sur l'élément de texte.

Si votre demande est d'avoir un effect de texte Fadein, il vous suffit d'appliquer le FADEOUT sur le calque "noir" sur elle, et inversement.

De cette façon, le texte anti-alias est maintenu intact.


0 commentaires

17
votes

Comme précédemment expliqué, cela est causé par ClearType dans Internet Explorer- mais il y a une solution de contournement qui rendra au moins ce problème tolérable.

$('#navigation').fadeIn(500, function(){
    if ($.browser.msie){this.style.removeAttribute('filter');}
});


0 commentaires

1
votes

Désolé pour la réponse très tardive, mais j'ai eu le même problème et je cherchais une solution lorsque je suis tombé sur ce sujet. Je n'ai pas trouvé de solution de travail dans ce sujet, mais je suis proposé une solution simple qui semble résoudre le problème parfaitement.

au lieu d'utiliser:

$ ('. élément'). Fadein (500)

Utilisez Fadeto et s'estomper à 99%:

$ ('. élément'). Fadeto (500, 0,99)

Vous ne verrez pas une différence dans 1% et que cela n'atteint pas une opacité à 100%, c'est-à-dire que cela ne semble pas appliquer ClearType.

laissez-moi savoir si cela fonctionne pour quelqu'un d'autre.


1 commentaires

Intéressant mais complètement le contraire de ce que la question initiale demandait. Besoin d'appliquer ClearType, pas de le supprimer.



0
votes

J'ai corrigé cela en ajoutant dans le CSS pour le texte requis

Filtre: alpha (opacité = 99);

Cela n'aura que d'effet c'est-à-dire. Je reçois toujours un petit changement dans IE7 mais c'est exceptionnel.

Vous pouvez le voir à fonctionner ici http://thriive.com.au/


0 commentaires

0
votes

a trouvé une solution prête pour ce problème.

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


0 commentaires

0
votes

J'ai une solution: Créez une autre div sur votre DOM comme superposition et exécutez vos fonctions de fondue sur cette div. Il apparaîtra comme si le contenu s'estompe in / sort. Cette approche est également plus performante, car vous ne déconnectez qu'une seule div au lieu de plusieurs éléments. Voici un exemple: xxx


0 commentaires

0
votes

J'ai également eu des problèmes de PNG transparents dans la zone fanée, mais combinant les JS ci-dessus pour supprimer l'attribut de filtre avec un petit peu de CSS, l'image Black 'Border' était parti alors que je suis mon cas.

est mon cas c'était un Élément qui utilise un Sprite CSS, alors je devais ajouter cela à ma classe Sprite dans la CSS: xxx


0 commentaires

0
votes

Je n'utilise pas jQuery mais j'ai à moitié résolu cette question en utilisant les CSS suivants: xxx

Le texte entièrement opaque est anti-aliasé maintenant, mais le translucide n'est pas. Ce n'est pas un énorme problème pour le texte translucide cependant.


0 commentaires