Các vấn đề chống răng cưa phông chữ với jQuery.fadeIn trong IE8?

Question

Tôi đang đập đầu vào tường với một vấn đề tôi gặp phải trong IE8. Điều này làm việc hoàn hảo tốt trong tất cả các trình duyệt khác, nhưng khi fadeIn kết thúc trong IE8, font anti-aliasing dường như thay đổi, làm cho văn bản thay đổi một chút.

Bạn có thể xem trang web tại http://www.ipulse.biz. Mã tôi đang sử dụng để gây ra mờ dần là khá đơn giản, như hình dưới đây.

var showContent = function() { 

    $('#content div:first').fadeIn(1000); 

    $('#navigation').fadeIn(500); 

} // end showContent 

Mã được gọi bởi hàm setInterval, nếu điều đó tạo ra sự khác biệt.

Answer 1

Điều này là do ClearType biến mất trong Internet Explorer, điều này khá khó chịu.

http://blog.bmn.name/2008/03/jquery-fadeinfadeout-ie-cleartype-glitch/

Answer 2

nó cần phải được gọi sau khi hiệu ứng mờ dần được hoàn thành (ví dụ 500ms sau vv)

Answer 3

Tôi biết câu trả lời của tôi đến một chút quá muộn, nhưng làm thế nào về Thinkin' ngược lại? IE7/IE8 không giữ bí danh cho văn bản bị mờ, vì vậy, nếu bạn có một nền màu đơn (ví dụ: màu đen), bạn có thể tạo div trống, màu nền: # 000; vị trí: tuyệt đối; display: block; và đặt nó trên phần tử văn bản.

Nếu yêu cầu của bạn là có hiệu ứng FadeIn văn bản, bạn chỉ cần áp dụng FadeOut cho lớp "đen" trên đó và ngược lại.

Bằng cách này, văn bản chống bí danh được giữ nguyên vẹn.

Answer 4

Như đã giải thích trước đây, điều này được gây ra bởi Cleartype trong Internet Explorer- nhưng có một cách giải quyết ít nhất sẽ làm cho vấn đề này có thể chấp nhận được.

$('#navigation').fadeIn(500, function(){ 
    if ($.browser.msie){this.style.removeAttribute('filter');} 
}); 

Điều đó sẽ buộc IE xóa minh bạch và do đó hiển thị văn bản bình thường.

Nó không phải là khá, không may.

Answer 5

Xin lỗi vì trả lời rất muộn, nhưng tôi đã gặp phải vấn đề tương tự và đang tìm kiếm giải pháp khi tôi bắt gặp chủ đề này. Tôi đã không tìm thấy một giải pháp làm việc trong chủ đề này, nhưng tôi đã đưa ra một giải pháp đơn giản mà dường như giải quyết vấn đề một cách hoàn hảo.

Thay vì sử dụng: ('yếu tố ').

$ fadeIn (500)

sử dụng fadeTo và mờ dần đến 99%: ('. Yếu tố')

$ fadeTo. (500, 0.99)

Bạn sẽ không thấy sự khác biệt trong 1% và bởi vì nó không đạt được độ mờ 100%, IE dường như không áp dụng cleartype.

Hãy cho tôi biết nếu điều này phù hợp với bất kỳ ai khác.

Answer 6

tôi cố định này bằng cách thêm vào css cho các văn bản cần thiết

lọc: alpha (opacity = 99);

điều này sẽ chỉ có hiệu lực tức là.Tôi vẫn nhận được một sự thay đổi nhỏ trong ie7 nhưng nó là ngoại lệ.

Bạn có thể thấy nó hoạt động tại đây http://thriive.com.au/

Answer 7

Tìm thấy giải pháp sẵn sàng cho vấn đề đó.

http://jquery.malsup.com/fadetest.html

Answer 8

Tôi có một giải pháp: Tạo một DIV trên DOM của bạn như một lớp phủ, và thực hiện các chức năng phai của bạn về vấn đề này chỉ div. Nó sẽ xuất hiện như thể nội dung đang mờ dần vào/ra. Cách tiếp cận này cũng hiệu quả hơn, vì bạn chỉ làm mờ một DIV duy nhất thay vì nhiều phần tử. Dưới đây là một ví dụ:

 

$('#containeroverlay').width($('#container').width()).height($('#container').height()).fadeIn('normal', function() { 
    // Step 1: change your content underneath the hidden div 
    // Step 2: hide the overlay 
    $('#containeroverlay').fadeOut('normal'); 
}) 
 

Answer 9

Tôi cũng đã có vấn đề với của PNG trong suốt trong của khu vực đã bị mờ, nhưng kết hợp các JS trên để loại bỏ các thuộc tính lọc với một chút nhỏ bé của css hình ảnh đen 'biên giới' đã biến mất trong khi mờ dần.

là trường hợp của tôi đó là một yếu tố có sử dụng một css-ma, vì vậy tôi chỉ phải thêm này đến lớp sprite của tôi trong css:

.sprite{ 
    background-image: url('/images/sprite.png'); 
    background-repeat: no-repeat; 
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr=#00FFFFFF,startColorStr=#00FFFFFF)"; /* IE8 */ 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00FFFFFF',startColorStr='#00FFFFFF'); /* IE6 & 7 */ 
    zoom: 1; 
} 

Answer 10

tôi không sử dụng JQuery nhưng tôi nửa đã giải quyết vấn đề này bằng cách sử dụng CSS sau:

div 
{ 
    opacity: .15; 
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=15)"; 
} 
div:hover 
{ 
    opacity: 1; 
    -ms-filter:""; 
} 

Văn bản hoàn toàn mờ đục được chống răng cưa ngay bây giờ, nhưng không phải là mờ. Nó không phải là một vấn đề lớn cho các văn bản mờ mặc dù.