IE теряет ClearType
Я испытываю что-то действительно странное!
У меня есть div, который я скрываю с помощью JS (jQuery). Как это:
$('#myDiv').hide();
Затем, когда я делаю fadeIn вот так:
$("#myDiv").fadeIn('slow');
тогда текст теряет ClearType в IE, но не в FF. Если я выберу toggle insted of fadeIn, тогда все в порядке.
Что такое IE, и есть ли какие-то решения, потому что он выглядит ужасно. (У меня включен ClearType, как вы, возможно, уже поняли)
Ответы 7
Когда к IE применяется затухание, он применяет его (по крайней мере, через jquery) к классу dxtransform, что приведет к потере любых эффектов сглаживания, пока его непрозрачность не вернется к единице.
Быстрый поиск по теме показывает следующее:
глюк jQuery fadeIn / fadeOut IE cleartype
Проблема, похоже, в том, что атрибут «фильтр» CSS не удаляется автоматически. Самое простое решение для этой проблемы будет удалять ее вручную:
$('#myDiv').fadeIn('slow', function() {
this.style.removeAttribute('filter');
});
Как объясняется в сообщении в блоге выше, это довольно запутанное решение.
Выдержка из сообщения в блоге, включая более чистый раствор по этой проблеме:
This means that every single time we want to fade an element, we need to remove the filter attribute, which makes our code look messy.
A simple, more elegant solution would be to wrap the .fadeIn() and .fadeOut() functions with a custom function via the plugin interface of jQuery. The code would be exactly the same, but instead of directly calling the fade functions, we call the wrapper. Like so:
$('#node').customFadeOut('slow', function() {
//no more fiddling with attributes here
});
So, how do you get this working? Just include the following code after you include the jQuery library for the added functionality.
(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);
даже с этим решением, на мой взгляд, он все равно выглядит ужасно. совершенно очевидно, что есть глюк. Лучше всего постараться, насколько это возможно, просто исчезнуть в цветных квадратах и позволить тексту появляться мгновенно
Начиная с jQuery 1.9, идентификатор jQuery.browser устарел. Потрясающе ... :-( Любые предложения о том, как реализовать приведенный выше код с помощью "обнаружения функций" вместо "обнаружения браузера"?
Я читал, что Firefox 2 использует свой собственный движок рендеринга текста всякий раз, когда применяется непрозрачность (по крайней мере, на Mac). Иногда это выглядит странно.
Я боролся с этим с помощью этого CSS (и, похоже, это вообще не влияет на производительность)
body {
-moz-opacity: 0.99;
}
Этот май работает и в IE. О, но вам нужно использовать свойство filter IE.
Один из способов - установить цвет фона для div (обычно) белый.
Это сработало для меня пару раз, когда я сталкивался с этой проблемой. Я думаю, вам нужно установить цвет фона для элемента, который появляется или исчезает.
Хорошо, вот мое худшее решение:
<head>
<script>
$(function() {
$(document.body).fadeIn(0);
});
</script>
</head>
<body>
<script>
$(document.body).hide();
</script>
body text
</body>
Немедленно скройте тело и затемните его, когда документ будет готов. Затем вы по существу отключаете cleartype.
Ох, и ПОЖАЛУЙСТА, никто на самом деле этого не делает. Или, если это ДЕЙСТВИТЕЛЬНО кажется вам разумным, тогда проверьте это хорошо. Просто помните, что вы ничего не увидите, пока не загрузится вся DOM. Я также видел некоторые странные графические сбои.
Мне удалось найти несколько «общее» решение. 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
...
Надеюсь, это поможет ...
Мне удалось найти несколько «общее» решение. 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
...
Надеюсь, это поможет ...
grr, почему они не могут поместить это в стандартный fadeIn. только что подтвердил, что его нет в 1.3.1 (по крайней мере, не требуя дополнительной настройки), поэтому, вероятно, не там