jQuery Girl
  1. jQuery Girl
  3. IE perd ClearType
Intereting Posts
Uncaught TypeError: Impossible d’appeler la méthode ‘remove’ de null dans primefaces.js? Ln = primefaces Comment se rendre à JSON dans Grails 2.0 Avertissement concernant les tables de données (id de table = ‘exemple’): impossible de réinitialiser la table de données Ignorer un élément du tableau foreach knockout js? Éléments jQuery créés à l’aide de .append (html) non disponible Comment faire pour que jqGrid reload se rende au serveur? jQuery: comment référencer un élément HTML dont le nom de classe a un point? Le moyen le plus simple de “tracer” de simples lignes sur une image avec jQuery et de l’enregistrer dans Rails DB? Comment rendre deux listes interchangeables, et quand la sélection est terminée Changer la valeur du champ de saisie de formulaire avec jquery dans un modal d’amorçage Est-ce que Google adsense casse mon menu? Problème de charge jQuery dans Internet Explorer Le lien Javascript datatable ne fonctionne pas sur la 2ème page JQuery – Atsortingbuts de fichier Affecter dynamicment des propriétés à un object JS

IE perd ClearType

Je vis quelque chose de vraiment étrange!

J’ai une div que je cache avec JS (jQuery). Comme ça: 

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

Puis quand je fais un fadeIn comme ceci: 

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

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

Qu’est-ce que IE et y a-t-il des solutions à cela parce que ça a l’air horrible. (J’ai ClearType sur comme vous pouvez le comprendre à ce stade)

Une recherche rapide sur le sujet montre ce qui suit:

jQuery fadeIn / fadeOut IE cleartype glitch

Le problème semble être que l’atsortingbut CSS “filter” n’est pas automatiquement supprimé. La solution la plus simple à ce problème serait de le supprimer manuellement: 

 $('#myDiv').fadeIn('slow', function() { this.style.removeAtsortingbute('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 voulons fondre un élément, nous devons supprimer l’atsortingbut filter, ce qui rend notre code désordonné.

Une solution simple et plus élégante consisterait à envelopper les fonctions .fadeIn () et .fadeOut () d’une fonction personnalisée via l’interface de plug-in de jQuery. Le code serait exactement le même, mais au lieu d’appeler directement les fonctions de fondu, nous appelons le wrapper. Ainsi: 

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

Alors, comment ça fonctionne? Incluez simplement le code suivant après avoir inclus 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.removeAtsortingbute('filter'); if(callback != undefined) callback(); }); }; $.fn.customFadeOut = function(speed, callback) { $(this).fadeOut(speed, function() { if(jQuery.browser.msie) $(this).get(0).style.removeAtsortingbute('filter'); if(callback != undefined) callback(); }); }; })(jQuery);

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

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

J’ai réussi à trouver une solution un peu «générique». removeAtsortingbute 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.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.removeAtsortingbute('filter'); } } if (jQuery.isFunction(old_complete_callback)) { old_complete_callback.call(this); } } }); // fix END ...

J’espère que cela aidera …

J’ai réussi à trouver une solution un peu «générique». removeAtsortingbute 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.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.removeAtsortingbute('filter'); } } if (jQuery.isFunction(old_complete_callback)) { old_complete_callback.call(this); } }}); // fix END ...

J’espère que cela aidera …

J’ai lu que Firefox 2 utilise son propre moteur de rendu du texte chaque fois que l’opacité est appliquée (du moins sur un Mac). Cela semble parfois é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 dans IE aussi. Oh, mais vous devrez utiliser la propriété de filter propre à IE.

Ok voici ma pire solution de tous les temps: 

      body text

Cachez immédiatement le corps et fondez-le une fois le document terminé. Ensuite, vous désactivez essentiellement cleartype.

Oh, et s’il vous plait, personne ne le fait réellement. Ou si cela semble VRAIMENT avoir un sens pour vous, alors testez-le bien. Rappelez-vous que vous ne verrez rien avant que le DOM entier ne soit chargé. J’ai également vu quelques problèmes graphiques étranges.