Anti-Aliasing-Probleme bei jQuery.fadeIn im IE8?

Question

Ich schlage meinen Kopf gegen die Wand mit einem Problem, das ich im IE8 habe. Ich verwende die FadeIn-Funktion von jQuery, um den Inhalt der Website einzublenden. Dies funktioniert einwandfrei in allen anderen Browsern, aber wenn die fadeIn endet in IE8 die Schriftart Anti-Aliasing scheint zu ändern, wodurch der Text leicht zu verschieben.

Sie können die Website besuchen unter http://www.ipulse.biz . Der Code, den ich verwende, um die Einblendung zu bewirken, ist ganz einfach, wie unten gezeigt.

var showContent = function() {

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

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

} // end showContent

Der Code wird von einer setInterval-Funktion aufgerufen, falls das einen Unterschied macht.

Answer 1

Wie bereits erläutert, wird dies durch Cleartype im Internet Explorer verursacht. Es gibt jedoch eine Umgehung, die dieses Problem zumindest erträglich macht.

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

Das sollte den IE zwingen, die Transparenz zu löschen und den Text normal darzustellen.

Leider ist es immer noch nicht schön.

Answer 2

Dies wird durch das Verschwinden von ClearType im Internet Explorer verursacht, was ziemlich ärgerlich ist.

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

Answer 3

Ich weiß, dass meine Antwort ein bisschen zu spät kommt, aber wie wäre es, wenn Sie umgekehrt denken würden? IE7 / IE8 behalten kein Anti-Alias für eingeblendeten Text. Wenn Sie also einen einfarbigen Hintergrund haben (z.B. schwarz), können Sie ein leeres div erstellen, background-color: #000; position: absolute; display:block; und legen Sie es über das Textelement.

Wenn Sie einen FadeIn-Effekt für einen Text wünschen, müssen Sie den FadeOut-Effekt nur auf die darüber liegende "schwarze" Ebene anwenden und umgekehrt.

Auf diese Weise bleibt der Text-Anti-Alias erhalten.

Answer 4

Entschuldigung für die sehr späte Antwort, aber ich hatte das gleiche Problem und suchte nach einer Lösung, als ich auf dieses Thema stieß. Ich habe keine funktionierende Lösung in diesem Thema gefunden, aber ich habe eine einfache Lösung gefunden, die das Problem perfekt zu lösen scheint.

Anstelle der Verwendung:

$('.element').fadeIn(500)

fadeTo verwenden und auf 99% einblenden:

$('.element').fadeTo(500, 0.99)

Sie werden keinen Unterschied bei den 1 % sehen, und da die Deckkraft nicht 100 % erreicht, scheint der IE die Klarschrift nicht anzuwenden.

Lassen Sie mich wissen, ob dies auch für andere funktioniert.

Answer 5

Sie muss nach Beendigung des Überblendungseffekts aufgerufen werden (z. B. 500 ms danach usw.)