Problemi di anti-aliasing con jQuery.fadeIn in IE8?

Question

Sto sbattendo la testa contro il muro con un problema che sto avendo in IE8. Sto usando la funzione fadeIn su jQuery per far sbiadire il contenuto del sito. Funziona perfettamente bene con tutti gli altri browser, ma quando la dissolvenza finisce in IE8 l'anti-aliasing dei caratteri sembra cambiare, facendo sì che il testo si sposti leggermente.

È possibile visualizzare il sito allo http://www.ipulse.biz. Il codice che sto usando per causare la dissolvenza è abbastanza semplice, come mostrato di seguito.

var showContent = function() { 

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

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

} // end showContent 

Il codice viene chiamato da una funzione setInterval, se ciò fa alcuna differenza.

Answer 1

Ciò è causato da ClearType che scompare in Internet Explorer, il che è piuttosto fastidioso.

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

Answer 2

ha bisogno di essere chiamato dopo che l'effetto di dissolvenza è completata (ad esempio 500 ms dopo l'etc.)

Answer 3

Conosco la mia risposta arriva un po 'troppo tardi, ma come circa Thinkin' viceversa? IE7/IE8 non mantiene l'anti-alias per il testo sbiadito, quindi, se si dispone di uno sfondo a singolo colore (ad esempio nero), è possibile creare un div vuoto, colore di sfondo: # 000; posizione: assoluta; blocco di visualizzazione; e metterlo sopra l'elemento di testo.

Se la tua richiesta è di avere un effetto FadeIn di testo devi solo applicare FadeOut al livello "nero" su di esso, e viceversa.

In questo modo il testo anti-alias viene mantenuto intatto.

Answer 4

Come spiegato in precedenza, questo è causato da Cleartype in Internet Explorer, ma esiste una soluzione che renderà almeno questo problema tollerabile.

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

Questo dovrebbe forzare IE per cancellare la trasparenza e il rendering del testo normalmente in tal modo.

Non è ancora bello, sfortunatamente.

Answer 5

Ci scusiamo per la risposta molto tarda, ma ho avuto lo stesso problema e stavo cercando una soluzione quando mi sono imbattuto in questo argomento. Non ho trovato una soluzione funzionante in questo argomento, ma ho trovato una soluzione semplice che sembra risolvere il problema perfettamente.

Invece di utilizzare: ('elemento ').

$ fadeIn (500)

uso fadeTo e dissolvenza al 99%: ('. Elemento')

$ fadeTo. (500, 0.99)

Non vedrete una differenza nell'1% e poiché non raggiunge il 100% di opacità, IE non sembra applicare cleartype.

Fammi sapere se questo funziona per chiunque altro.

Answer 6

Ho fissato questo aggiungendo nel css al testo richiesto

filtro: alpha (opacità = 99);

questo avrà effetto solo ie.Ho ancora un piccolo spostamento in ie7 ma è eccezionale.

potete vederlo lavorare qui http://thriive.com.au/

Answer 7

trovato una soluzione pronta per quel problema.

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

Answer 8

ho una soluzione: Creare un altro DIV sul DOM come overlay ed eseguire le funzioni di dissolvenza su questo div solo. Apparirà come se il contenuto stesse sbiadendo dentro/fuori. Questo approccio è anche più performante, dato che stai dissolvendo solo un singolo DIV invece di più elementi. Ecco un esempio:

 

$('#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

Ho anche avuto problemi con PNG trasparenti di in aree sbiadite di, ma combinando i JS sopra per rimuovere l'attributo filtro con un po 'di css l'immagine in bianco 'border' non c'era più mentre dissolvenza.

è il mio caso è stato un elemento che utilizza un CSS-sprite, così ho solo dovuto aggiungere questo alla mia classe sprite nel 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

non sto usando jQuery ma io mezza risolto questo problema utilizzando il seguente CSS:

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

il testo completamente opaco è anti-aliasing ora, ma non è traslucida. Tuttavia, non è un grosso problema per il testo traslucido.