2013-05-08 17 views
5

Ho un div con un'immagine di sfondo che sto ruotando. Sotto è il mio regole CSS per ruotarlo:internet explorer non anti alias immagine ruotata

#services_parallax { 
-webkit-transform:rotate(3.1deg); /* Webkit */ 
transform: rotate(3.1deg); /* firefox & IE9+ */ 
/* IE7 & 8 */ filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.998537, M12=-0.054079, M21=0.054079, M22=0.998537, sizingMethod='auto expand'); 
} 

Il problema è in IE i bordi dell'immagine sono molto blocchi e frastagliate, invece di essere linee morbide e non sembrano essere antialias. Qualcuno sa una correzione per questo? Lo stava facendo in chrome fino a quando non ho applicato la correzione applicando -webkit-backface-visibility: hidden; che ha funzionato benissimo per Chrome, ho solo bisogno di una soluzione simile per IE se ne esiste uno.

di replicare questo problema incollare il seguente in un file HTML e guardarlo in IE:

<style type="text/css"> 
#services_parallax { -webkit-transform:rotate(3.1deg); /* Webkit */ 
    transform: rotate(3.1deg); /* firefox & IE9+ */ 
    /* IE7 & 8 */ filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.998537, M12=-0.054079, M21=0.054079, M22=0.998537, sizingMethod='auto expand'); 
    background: url(http://img.netcarshow.com/Pagani-Zonda_R_2009_1600x1200_wallpaper_01.jpg) center center; 
    background-size:100% auto; 
    height:100px; 
    width:700px; 
    margin-top:50px; 
    margin-left:50px; 
} 
</style> 
<div id="services_parallax"></div> 
+0

specificare quali versioni di IE riscontrano problemi? IE 7/8 (usando 'filter') funzionerà in modo molto diverso da IE 9/10 (usando' transform'). – Spudley

+0

Sto riscontrando il problema in tutte le versioni – geoffs3310

+0

puoi anche confermare che stai utilizzando copie reali di ciascuna versione di IE o se stai utilizzando la modalità di compatibilità per eseguire il test? (ancora, per cose come questa, questo potrebbe avere un impatto sui risultati che vedi) – Spudley

risposta

1

Per ovviare a questo problema ho usato le ombre della scatola, che sembrava funzionare e rendere i bordi lisci

2

L'anti-aliasing non funziona su immagini grandi se ci sono altezza e larghezza forzate con CSS (IE11, 10 e 9). Ho fatto alcuni test (molto) approssimativi e deduco che l'anti-aliasing funziona sotto 1000px.

Sto ancora cercando una fonte ufficiale per questo problema.

0

@ geoffs3310, sento il tuo dolore.

Ho trovato questo è ancora un problema con IE11 e alcuni altri browser (Safari su iPad e su Chrome e il browser predefinito su Samsung Galaxy Tab A). Per ovviare a questo ho colpito un colore di sfondo scuro sull'elemento che contiene l'immagine di sfondo. Non so perché, ma sembra che faccia il trucco, ad es.

background-color: black; 

E nel caso in cui nessun altro si legge questo post, mi permettono di proporre un paio di altre correzioni che ho trovato nel trattare con le varie problematiche derivanti dalla inclinazione contenuti. Nota, questi sono tutti applicati all'elemento contenitore trasformato.

elimina i bordi frastagliati pulsanti ottengono dopo rotazioni asimmetriche sono applicati (kudos):

transform-style: preserve-3d; 

Eliminare sfocata dove <canvas> è stato utilizzato (kudos to Zoltan). Nota, se ci sono altre trasformate sull'elemento dichiararle su righe separate piuttosto che stenografia (dalla memoria questo è stato quello di lavorare intorno ad un simile problema Safari):

transform: perspective(0); 

E un'altra correzione, anche se la mia documentazione manca quello che fissa , Penso che abbia a che fare con contenuti janky o offuscati in IE-try:

outline: 1px solid transparent;