IE verliert Cleartype

Question

Ich erlebe etwas wirklich seltsam!

Ich habe ein div, dass ich mit JS (jQuery) bin versteckt. Wie folgt aus:

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

Dann, wenn ich eine fadeIn wie folgt aus:

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

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

Was ist IE bis zu und ist es Lösungen für es, weil es schrecklich aussieht. (Ich habe Cleartype auf, wie Sie vielleicht an diesem Punkt verstehen)

Answer 1

Eine schnelle Suche über das Thema zeigt die folgenden:

jQuery fadeIn / fadeOut IE Cleartype Glitch

Das Problem scheint zu sein, dass die CSS „Filter“ Attribut wird nicht automatisch entfernt. Die einfachste Lösung , um dieses Problem zu deinstallieren manuell würde:

$('#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   wollen ein Element verblassen, müssen wir   Entfernen des Filter Attribut, das   unser Code aussehen unordentlich macht.

     

Eine einfache, elegante Lösung wäre   sein, die .fadeIn einzuwickeln () und   .fadeOut () -Funktionen mit einem benutzerdefinierten   Funktion über die Plugin-Schnittstelle von   jQuery. Der Code wäre genau das   gleiche, aber anstatt direkt anrufen   die Fade-Funktionen, so nennen wir die   Verpackung. Wie so:

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

  

Also, wie Sie diese Arbeit bekommen? Gerade   umfassen die nach dem folgenden Code   umfassen die jQuery-Bibliothek für die   zusätzliche Funktionalität.

(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);

Answer 2

Eine Möglichkeit ist, eine Hintergrundfarbe auf dem div einstellen (in der Regel) weiß.

Answer 3

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

Answer 4

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

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

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 dies dazu beitragen wird ...

Answer 5

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.x.x.x.js)

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 dies dazu beitragen wird ...

Answer 6

Ich habe gelesen, Firefox 2 sein eigenes Text-Rendering-Engine verwendet, wenn Opazität (zumindest auf einem Mac) angewandt wird. Dies kann manchmal seltsam aussehen.

Ich habe mit diesem CSS bekämpft diese (und es scheint nicht überhaupt die Leistung beeinträchtigen)

body {
   -moz-opacity: 0.99;
}

Das können Arbeit auch im Internet Explorer. Oh, aber Sie werden Anstand filter IE Eigenschaft verwenden müssen.

Answer 7

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>

verstecken sofort den Körper, und verblassen sie in, wenn das Dokument vollständig ist. Dann deaktivieren Sie im Wesentlichen Cleartype.

Oh und bitte nicht jemand diese actaully tun. Oder wenn es wirklich Sinn zu machen scheint für Sie es dann gut testen. Denken Sie daran, wie Sie es sonst nichts sehen, bis die gesamte DOM geladen ist. Ich sah auch einige seltsame Grafikfehler.