Отрисовка текста размыта в Firefox и Internet Explorer с использованием jQuery

Question

Не уверен, что вызывает это?

Если я использую slideDown в Firefox, рендеринг текста обрезает верхнюю часть букв до завершения анимации. Это нормально в IE.

Если я затем изменю анимацию, чтобы использовать вместо нее fadeIn, размытие не происходит в Firefox, но текст в IE очень зазубренный.

Из другого вопроса, который я задавал в прошлом, касающегося анимации, парень сказал мне, что я должен обернуть то, что я хочу, чтобы оживить в другом DIV и оживить это вместо этого. Это позволило разобраться с резкостью, вызванной заполнением содержимого внутри .animateDiv.

Есть ли хитрость в рендеринге текста в jQuery

Answer 1

Вам нужно использовать технику , как здесь или здесь . По сути, любое исчезновение в IE должно выполняться с помощью CSS-фильтра, который на самом деле является специфической для IE вещью, которая на самом деле FUBARs CelarType ... поэтому, когда вы заканчиваете постепенное исчезновение или понижение, вам нужно удалить это filter, которое оставляет ,

Теперь для частично блеклого текста это не поможет, но если вы блекнете полностью внутрь или наружу, это прояснит результат ... во время блеклости у вас все еще будет неровный текст, именно так ведет себя IE, к сожалению (IE9 исправляет это, но IE7 / 8 давно никуда не денется).

Если вы используете технику в первой ссылке , просто включите функции (только один раз), прежде чем использовать их в любом месте, например:

$.fn.customFadeIn = function(speed, callback) {
    $(this).fadeIn(speed, function() {
        if(!$.support.opacity)
            $(this).get(0).style.removeAttribute('filter');
        if(callback != undefined)
            callback();
    });
};

Тогда вместо .fadeIn() вместо этого вы звоните .customFadeIn(), например:

$("#uglyThingInIE").customFadeIn(500);

Answer 2

Я думаю В IE есть проблема с ClearType и анимацией . Не уверен насчет FF.