IE теряет ClearType

Question

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

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

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

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

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

тогда текст теряет ClearType в IE, но не в FF.Если я выберу переключатель вместо FadeIn, то все будет в порядке.

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

Answer 1

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

Ошибка jQuery FadeIn/FadeOut в IE ClearType

Кажется, проблема в том, что атрибут 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);

Answer 2

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

Answer 3

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

Answer 4

Мне удалось найти несколько «общее» решение. удалить атрибут не работает, если непрозрачность находится в диапазоне от 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

    ...

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

Answer 5

Мне удалось найти несколько «общее» решение.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

...

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

Answer 6

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

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

body {
   -moz-opacity: 0.99;
}

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

Answer 7

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

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

<body>

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

    body text
</body>

Немедленно скройте тело и затените его, когда документ будет завершен.Тогда вы по сути отключите ClearType.

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