IE perd ClearType

Question

Je vis quelque chose de vraiment étrange!

J'ai une div que je cache avec JS (jQuery). Comme ceci:

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

Puis, quand je fais un fadeIn comme ceci:

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

alors le texte perd ClearType dans IE mais pas dans FF. Si je vais avec bascule insted de fadeIn, alors tout va bien.

Que fait IE et y a-t-il des solutions à cela, parce que cela semble horrible. (j'ai ClearType sur comme vous le comprenez peut-être à ce stade)

Answer 1

Une recherche rapide sur le sujet montre les éléments suivants:

jQuery fadeIn / fadeOut IE cleartype glitch

Le problème semble être que le " filtre " CSS Cet attribut n'est pas automatiquement supprimé. La solution la plus simple à ce problème serait de le supprimer manuellement:

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

Comme l'explique le billet de blog ci-dessus, il s'agit d'une solution plutôt compliquée.

Extrait de l'article de blog, incluant une solution plus propre à ce problème:

  

Cela signifie que chaque fois que nous   vouloir effacer un élément, nous devons   supprimer l'attribut filter qui   rend notre code désordonné.

     

Une solution simple et plus élégante   être pour envelopper le .fadeIn () et   .fadeOut () fonctionne avec un custom   fonction via l'interface du plugin de   jQuery. Le code serait exactement le   idem, mais au lieu d’appeler directement   les fonctions de fondu, nous appelons le   emballage. Comme si:

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

  

Alors, comment cela fonctionne-t-il? Juste   inclure le code suivant après votre   inclure la bibliothèque jQuery pour la   fonctionnalité ajoutée.

(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

Une solution consiste à définir une couleur d'arrière-plan sur le blanc div (normalement).

Answer 3

Lorsque le fondu est appliqué à IE, il l’applique (au moins via jquery) à la classe dxtransform, ce qui lui fera perdre tous les effets d’antialiasing jusqu’à ce que son opacité redevienne égale à un.

Answer 4

J'ai réussi à trouver une solution un peu «générique». removeAttribute ne fonctionne pas si l'opacité est comprise entre 0 et 1, la solution suivante est la suivante:

Placez ce code juste après la première ligne de la définition de la méthode animée jQuery (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

    ...

J'espère que cela vous aidera ...

Answer 5

J'ai réussi à trouver une solution un peu «générique». removeAttribute ne fonctionne pas si l'opacité est comprise entre 0 et 1, voici donc ma solution à deux cents:

Placez ce code juste après la première ligne de la définition de la méthode animée jQuery (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

...

J'espère que cela vous aidera ...

Answer 6

J'ai lu que Firefox 2 utilisait son propre moteur de rendu de texte chaque fois que l'opacité était appliquée (du moins sur un Mac). Cela a parfois l’air étrange.

J'ai combattu cela avec ce CSS (et cela ne semble pas affecter les performances du tout)

body {
   -moz-opacity: 0.99;
}

Cela peut fonctionner également dans IE. Oh, mais vous aurez besoin d’utiliser la propriété filtre de propriété d’IE.

Answer 7

Ok, voici ma pire solution de ma vie:

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

<body>

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

    body text
</body>

Cachez immédiatement le corps et fondez-le à la fin du document. Ensuite, vous désactivez essentiellement cleartype.

Oh, et VEUILLEZ personne ne le fait réellement. Ou si cela semble VRAIMENT avoir un sens pour vous, testez-le bien. Rappelez-vous que vous ne verrez rien tant que le DOM n’est pas chargé. J'ai également vu quelques problèmes graphiques étranges.