IE verliert ClearType

Ich habe etwas wirklich seltsames erlebt!IE verliert ClearType

Ich habe ein div, das ich mit JS (jQuery) verstecke. So:

$('#myDiv').hide();

Dann, wenn ich eine fadeIn wie folgt aus:

$("#myDiv").fadeIn('slow');

dann wird der Text in Cleartype IE, aber nicht in FF verliert. Wenn ich mit toggle anstelle von fadeIn gehe, ist alles in Ordnung.

Was ist IE bis zu und gibt es irgendwelche Lösungen dafür, weil es schrecklich aussieht. (I Cleartype auf, wie Sie an dieser Stelle vielleicht verstehen)

Quelle

2009-01-04 Adis

Eine schnelle Suche über das Thema zeigt folgendes:

jQuery fadeIn/fadeOut IE cleartype glitch

Das Problem scheint, dass die CSS „Filter“ wird nicht automatisch entfernt Attribut zu sein. Die einfachste Lösung für dieses Problem wäre es manuell zu entfernen:

$('#myDiv').fadeIn('slow', function() { 
    this.style.removeAttribute('filter'); 
});

Wie die Blog-Post oben erklärt, ist dies eine ziemlich chaotisch Lösung.

Auszug aus der Blog-Post, darunter eine sauberere Lösung für dieses Problem:

Das bedeutet, dass jedes Mal, wenn wir ein Element verblassen wollen, müssen wir die Filter-Attribut entfernen, die macht unseren Code chaotisch.

Eine einfache, elegante Lösung würde sein, die .fadeIn() und .fadeOut() -Funktionen mit einem benutzerdefinierten Funktion über die Plugin-Schnittstelle von jQuery einzuwickeln. Der Code wäre genau der gleichen, aber anstatt die Fade-Funktionen direkt aufrufen, rufen wir die Wrapper. Wie so:

$('#node').customFadeOut('slow', function() { 
    //no more fiddling with attributes here 
});

Also, wie Sie diese Arbeit bekommen? Nur enthalten den folgenden Code nach Ihnen enthalten die jQuery-Bibliothek für die Funktionalität hinzugefügt.

(function($) { 
    $.fn.customFadeIn = function(speed, callback) { 
     $(this).fadeIn(speed, function() { 
      if(jQuery.browser.msie) 
       $(this).get(0).style.removeAttribute('filter'); 
      if(callback != undefined) 
       callback(); 
     }); 
    }; 
    $.fn.customFadeOut = function(speed, callback) { 
     $(this).fadeOut(speed, function() { 
      if(jQuery.browser.msie) 
       $(this).get(0).style.removeAttribute('filter'); 
      if(callback != undefined) 
       callback(); 
     }); 
    }; 
})(jQuery);

Quelle

2009-01-04 14:34:00

grr warum kann man das nicht in den standard fadeIn legen. gerade bestätigt es nicht in 1.3.1 (zumindest nicht ohne zusätzliche Konfiguration) so wahrscheinlich nicht dort –

sogar mit dieser Lösung sieht es noch ziemlich schrecklich meiner Meinung nach. es ist offensichtlich, dass es einen Fehler gibt. Am besten versuchen Sie es so einfach wie möglich, farbige Kästchen einfach einzufärben und den Text sofort erscheinen zu lassen. –

Ab jQuery 1.9 ist der jQuery.browser Bezeichner veraltet. Ehrfürchtig ... :-(Irgendwelche Vorschläge, wie man den obigen Code über "Feature-Erkennung" statt "Browser-Erkennung" implementiert? – ClearCloud8

Wenn Fade IE angewandt wird, wird es sie (zumindest über jquery) die dxtransform Klasse Anwendung, die es keine Anti-Aliasing-Effekte verlieren machen wird, bis seine Opazität ist zurück auf eins.

Quelle

2009-01-04 14:33:27 SuperRoach

Ich habe gelesen, Firefox 2 sein eigenes Text-Rendering-Engine verwendet, wenn Opazität (zumindest auf einem Mac) angewandt wird. Das sieht manchmal komisch aus.

Ich habe bekämpft diese mit diesem CSS (und es scheint nicht, die Leistung zu beeinflussen überhaupt)

body { 
    -moz-opacity: 0.99; 
}

Diese kann Arbeit auch im Internet Explorer. Oh, aber Sie müssen IE Property filter Eigentum verwenden.

Quelle

2009-01-04 14:37:15 alex

Ein Weg ist, eine Hintergrundfarbe auf dem Div (normalerweise) weiß zu setzen.

Quelle

2009-01-04 15:02:15 redsquare

funktionierte nicht für mich in IE7 auf Vista –

Das hat für mich das Paar Mal funktioniert, das ich habe Ich finde, Sie müssen die Hintergrundfarbe für das Element festlegen, das ein- oder ausgeblendet wird. –

-1

Ok hier ist meine schlechteste Lösung überhaupt:

<head> 
    <script> 
     $(function() { 
       $(document.body).fadeIn(0); 
     }); 
    </script> 
</head> 

<body> 

    <script> 
     $(document.body).hide(); 
    </script> 

    body text 
</body>

sofort den Körper verbergen, und verblassen sie in, wenn das Dokument vollständig ist. Dann deaktivierst du im Wesentlichen cleartype.

Oh und BITTE tun Sie niemand dies tun. Oder wenn es WIRKLICH scheint, dann teste es gut. Denken Sie daran, dass Sie nichts sehen werden, bis das gesamte DOM geladen ist. Ich sah auch einige seltsame Grafikfehler.

Quelle

2009-01-26 11:55:32

Ich habe es geschafft, eine etwas "generische" Lösung zu ziehen. removeAttribute funktioniert nicht, wenn Opazität zwischen 0 und 1 ist, so meine zwei Cent Lösung folgt:

Setzen Sie diesen Code nur nach der ersten Zeile von jQuery animieren Methodendefinition (jquery.xxxjs)

animate: function(prop, speed, easing, callback) { 
var optall = jQuery.speed(speed, easing, callback); 

/* 
* IE rendering anti-aliasing text fix. 
*/ 
// fix START 
var old_complete_callback = optall.complete; 
optall = jQuery.extend(optall, {complete: function(){ 
     if (jQuery.browser.msie) { 
      var alpha = $(this).css('opacity'); 
     if(alpha == 1 || alpha == 0) { 
      this.style.removeAttribute('filter'); 
     } 
     } 
     if (jQuery.isFunction(old_complete_callback)) { 
     old_complete_callback.call(this); 
     } 
    } 
}); 
// fix END 

    ...

Hope this helfen ...

Quelle

2012-01-09 11:48:30 Rogi

ich habe es geschafft, eine etwas 'generische' Lösung zu ziehen. removeAttribute funktioniert nicht, wenn Opazität zwischen 0 und 1 ist, so meine zwei Cent Lösung folgt:

Setzen Sie diesen Code direkt nach der ersten Zeile der Methodendefinition jQuery animieren (jquery.xxxjs)

animate: function(prop, speed, easing, callback) { 
var optall = jQuery.speed(speed, easing, callback); 

/* 
* IE rendering anti-aliasing text fix. 
*/ 
// fix START 
var old_complete_callback = optall.complete; 
optall = jQuery.extend(optall, {complete: function(){ 
    if (jQuery.browser.msie) { 
     var alpha = $(this).css('opacity'); 
     if(alpha == 1 || alpha == 0) { 
      this.style.removeAttribute('filter'); 
     } 
    } 
    if (jQuery.isFunction(old_complete_callback)) { 
     old_complete_callback.call(this); 
    } 
}}); 
// fix END 

...

Hoffe, das wird helfen ...

Quelle

2012-01-10 13:07:25 Rogi

IE verliert ClearType

Antwort

Verwandte Themen