IE теряет ClearType

Я испытываю что-то действительно странное!

У меня есть div, который я скрываю с JS (jQuery). Вот так:

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

Затем, когда я делаю fadeIn следующим образом:

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

тогда текст теряет ClearType в IE, но не в FF. Если я пойду с переключением instade fadeIn, тогда все будет хорошо.

Что такое IE и есть ли какие-либо решения для него, потому что это выглядит ужасно. (У меня есть ClearType, поскольку вы, возможно, понимаете на этом этапе)

Ответы

Ответ 1

Быстрый поиск по теме показывает следующее:

jQuery fadeIn/fadeOut IE cleartype glitch

Проблема заключается в том, что атрибут "фильтр" CSS не удаляется автоматически. Самое простое решение для этой проблемы будет удалять его вручную:

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

Как объясняется выше в блоге, это довольно грязное решение.

Отрывок из сообщения в блоге, включая решение для очистки:

Это означает, что каждый раз, когда мы хотите вытеснить элемент, нам нужно удалить атрибут фильтра, который делает наш код грязным.

Простое, более элегантное решение обернуть .fadeIn() и .fadeOut() с пользовательским функции через интерфейс плагина JQuery. Код был бы точно то же самое, но вместо прямого вызова функции затухания, мы называем обертка. Например:

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

Итак, как вы это делаете? Просто включить следующий код после вас включить библиотеку jQuery для добавлена функциональность.

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

Ответ 2

Один из способов - установить фоновый цвет на div (обычно) белый.

Ответ 3

Когда в IE применяется fade, он применяет его (по крайней мере через jquery) класс dxtransform, который заставит его терять любые эффекты сглаживания, пока его непрозрачность не вернется к одному.

Ответ 4

Мне удалось вывести несколько "общее" решение. removeAttribute не работает, если непрозрачность находится между 0 и 1, поэтому следующее решение для двух центов:

Поместите этот код сразу после первой строки определения метода анимации 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

    ...

Надеюсь, это поможет...

Ответ 5

Поместите этот код сразу после первой строки определения метода анимации 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

...

Надеюсь, это поможет...

Ответ 6

Я читал, что Firefox 2 использует свой собственный движок рендеринга текста, когда применяется непрозрачность (по крайней мере, на Mac). Иногда это выглядит странно.

Я сражался с этим CSS (и он вообще не влияет на производительность)

body {
   -moz-opacity: 0.99;
}

Это может работать и в IE. О, но вам нужно использовать свойство IE filter.

Ответ 7

Хорошо, вот мое худшее решение:

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

<body>

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

    body text
</body>

Немедленно скрыть тело и угаснуть его, когда документ будет завершен. Затем вы по существу отключите cleartype.

Oh и ПОЖАЛУЙСТА, не делайте этого никому. Или, если это действительно имеет смысл для вас, тогда хорошо его протестируйте. Просто помните, что вы не увидите ничего, пока не будет загружена вся DOM. Я также видел некоторые странные графические сбои.