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

Ich habe das Problem behoben, indem ich das css für den erforderlichen Text eingefügt habe

filter:alpha(opacity=99);

Dies wirkt sich nur auf ie. Ich bekomme immer noch eine kleine Verschiebung in ie7, aber es ist akzeptabel.

Hier können Sie sehen, wie es funktioniert http://thriive.com.au/

Answer 2

Ich habe eine fertige Lösung für dieses Problem gefunden.

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

Answer 3

Ich habe eine Lösung: Erstellen Sie ein weiteres DIV in Ihrem DOM als Overlay, und führen Sie Ihre Fade-Funktionen nur auf diesem DIV aus. Es wird so aussehen, als ob der Inhalt ein- und ausgeblendet wird. Dieser Ansatz ist auch leistungsfähiger, da Sie nur ein einziges DIV anstelle von mehreren Elementen einblenden. Hier ist ein Beispiel:

$('#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');
})

Answer 4

Ich hatte auch Probleme mit transparenten PNGs in ausgeblendeten Bereichen, aber die Kombination der oben genannten JS für das Entfernen der Filter-Attribut mit einem winzigen bisschen css das Bild schwarz "Grenze" war weg, während Fading.

In meinem Fall war es ein Element, das ein css-sprite verwendet, so musste ich nur dies zu meinem sprite Klasse in der css hinzufügen:

.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;
}

Answer 5

Ich verwende kein JQuery, aber ich habe dieses Problem halb gelöst, indem ich das folgende CSS verwendet habe:

div
{
    opacity: .15;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=15)";
}
div:hover
{
    opacity: 1;
    -ms-filter:"";
}

Der völlig undurchsichtige Text wird jetzt mit Anti-Aliasing versehen, der durchscheinende jedoch nicht. Es ist nicht ein großes Problem für den durchscheinenden Text aber.