즉, ClearType를 잃고 있습니다
https://stackoverflow.com/questions/411058
-
03-07-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian문제
나는 정말로 이상한 것을 경험하고있다!
JS (jQuery)와 함께 숨어있는 DIV가 있습니다. 이와 같이:
$('#myDiv').hide();
그런 다음 이렇게 페이드를 만들 때 :
$("#myDiv").fadeIn('slow');
그런 다음 텍스트는 IE에서 ClearType를 잃지 만 FF에서는 없다. Fadein이 토글과 함께 가면 괜찮습니다.
즉, 끔찍해 보이기 때문에 무엇을 할 수 있고 어떤 솔루션이 있습니까?(이 시점에서 이해할 수 있듯이 ClearType가 있습니다)
해결책
주제에 대한 빠른 검색은 다음을 보여줍니다.
jQuery fadein/fadeout, 즉 ClearType Glitch
문제는 CSS "필터"속성이 자동으로 제거되지 않는 것 같습니다. 가장 간단한 솔루션 이 문제는 수동으로 제거하는 것입니다.
$('#myDiv').fadeIn('slow', function() {
this.style.removeAttribute('filter');
});
위의 블로그 게시물에서 설명 하듯이, 이것은 다소 지저분한 해결책입니다.
a.를 포함하여 블로그 게시물에서 발췌 청소기 솔루션 이 문제에 :
즉, 요소를 희미하게 만들기를 원할 때마다 필터 속성을 제거해야하므로 코드가 지저분 해 보입니다.
간단하고 우아한 솔루션은 jQuery의 플러그인 인터페이스를 통해 .fadein () 및 .fadeout () 함수를 사용자 정의 기능으로 래핑하는 것입니다. 코드는 정확히 동일하지만 페이드 함수를 직접 호출하는 대신 래퍼를 호출합니다. 그렇게 :
$('#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);
다른 팁
한 가지 방법은 DIV (일반적으로) 흰색에 배경색을 설정하는 것입니다.
페이드가 IE에 적용되면 DXTRANSFORM 클래스를 적용하여 (적어도 jQuery를 통해) 불투명도가 돌아올 때까지 항아리아 효과를 잃게됩니다.
나는 다소 '일반적인'솔루션을 가져 왔습니다. RemoveAttribute 불투명도가 0과 1 사이 인 경우 작동하지 않으므로 두 센트 솔루션이 다음과 같습니다.
jQuery 애니메이션 메소드 정의의 첫 번째 줄 직후이 코드를 넣으십시오 (jquery.xxxjs)
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 사이 인 경우 RemoveTribute가 작동하지 않으므로 두 센트 솔루션이 다음과 같습니다.
jQuery 애니메이션 메소드 정의의 첫 번째 줄 직후이 코드를 넣으십시오 (jquery.xxxjs)
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;
}
이것 5월 IE에서도 일하십시오. 아,하지만 IE의 적절성을 사용해야합니다 filter 재산.
좋아, 여기에 내 최악의 솔루션이 있습니다.
<head>
<script>
$(function() {
$(document.body).fadeIn(0);
});
</script>
</head>
<body>
<script>
$(document.body).hide();
</script>
body text
</body>
즉시 몸을 숨기고 문서가 완료되면 사라집니다. 그런 다음 본질적으로 ClearType를 비활성화합니다.
오 그리고 아무도이 작업을 수행하지 마십시오. 또는 그것이 실제로 당신에게 의미가있는 것처럼 보이면 잘 테스트하십시오. DOM 전체가로드 될 때까지 아무것도 보지 못한다는 것을 기억하십시오. 나는 또한 더 이상한 그래픽 결함을 보았다.
