IE теряет ClearType - PullRequest
Новая
       61

IE теряет ClearType

14 голосов
/ 04 января 2009

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

У меня есть div, который я прячу с JS (jQuery). Как это: 

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

Затем, когда я делаю фейдингу, вот так: 

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

тогда текст теряет ClearType в IE, но не в FF. Если я перейду к переключателю insted из fadeIn, то все нормально.

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

Ответы [ 7 ]

24 голосов
/ 04 января 2009

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

jQuery fadeIn / fadeOut IE сбой ясного типа

Кажется, проблема в том, что атрибут CSS «filter» не удаляется автоматически. Самое простое решение этой проблемы - удалить ее вручную: 

$('#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);
5 голосов
/ 04 января 2009

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

2 голосов
/ 04 января 2009

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

1 голос
/ 10 января 2012

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

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

...

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

1 голос
/ 09 января 2012

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

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

    ...

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

0 голосов
/ 26 января 2009

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

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

<body>

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

    body text
</body>

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

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

0 голосов
/ 04 января 2009

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

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

body {
   -moz-opacity: 0.99;
}

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

...