IEはClearTypeを失います
https://stackoverflow.com/questions/411058
-
03-07-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian質問
本当に奇妙なことを経験しています！
JS（jQuery）で非表示にしているdivがあります。 このように：
$('#myDiv').hide();
次に、次のようにfadeInを作成します：
$("#myDiv").fadeIn('slow');
その後、テキストはIEではClearTypeを失いますが、FFでは失われません。 fadeInの代わりにトグルを使用すると、すべて問題ありません。
IEの現在の状況と、それに対する解決策は、恐ろしく見えるためです。 （この時点でおそらく理解できるようにClearTypeをオンにしています）
解決
件名をすばやく検索すると、次のことがわかります。
jQuery fadeIn / fadeOut IE cleartype glitch
問題は、CSS＆quot; filter＆quot;属性は自動的に削除されません。 この問題の最も簡単な解決策は、手動で削除することです。
$('#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);
他のヒント
1つの方法は、divの背景色（通常）白を設定することです。
IEにフェードが適用されると、（少なくともjqueryを介して）dxtransformクラスが適用され、不透明度が1に戻るまでアンチエイリアス効果が失われます。
私はなんとか「一般的な」ソリューションを引き出すことができました。不透明度が0〜1の場合、 removeAttribute は機能しないため、2セントのソリューションを次に示します。
このコードを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〜1の場合、removeAttributeは機能しません。したがって、私の2セントのソリューションは次のとおりです。
このコードを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
...
これが役立つことを願っています...
Firefox 2は、不透明度が適用されるたびに（少なくともMacで）独自のテキストレンダリングエンジンを使用します。これは時々奇妙に見えます。
このCSSでこれに対抗しました（パフォーマンスにまったく影響しないようです）
body {
-moz-opacity: 0.99;
}
この はIEでも機能します。ああ、IEの適切な filter プロパティを使用する必要があります。
さて、これが私の最悪の解決策です：
<head>
<script>
$(function() {
$(document.body).fadeIn(0);
});
</script>
</head>
<body>
<script>
$(document.body).hide();
</script>
body text
</body>
すぐに本文を非表示にし、ドキュメントが完成したらフェードインします。次に、本質的にcleartypeを無効にします。
ああ、誰も実際にこれを行ってはいけません。または、本当にあなたにとって意味があると思われる場合は、それをよくテストしてください。 DOM全体がロードされるまで、何も表示されないことを覚えておいてください。また、奇妙なグラフィカルな不具合も見られました。
