css trasformare, bordi frastagliati in cromo

Ho utilizzato la trasformazione CSS3 per ruotare immagini e caselle di testo con bordi nel mio sito web.

Il problema è che il bordo appare frastagliato in Chrome, come un gioco (a bassa risoluzione) senza anti-aliasing. In IE, Opera e FF sembra molto meglio perché viene utilizzato AA (che è ancora chiaramente visibile ma non così male). Non riesco a testare Safari perché non possiedo un Mac.

La foto e il testo ruotati sembrano buoni, è solo il bordo che sembra frastagliato.

Il CSS che uso è questo:

.rotate2deg { transform: rotate(2deg); -ms-transform: rotate(2deg); /* IE 9 */ -webkit-transform: rotate(2deg); /* Safari and Chrome */ -o-transform: rotate(2deg); /* Opera */ -moz-transform: rotate(2deg); /* Firefox */ } 

C’è un modo per risolvere il problema, ad esempio forzando Chrome ad usare AA?

Esempio di seguito:

Esempio di bordi frastagliati

Nel caso qualcuno lo stia cercando in seguito, un bel trucco per eliminare quei bordi frastagliati sulle trasformazioni CSS in Chrome consiste nell’aggiungere la proprietà CSS -webkit-backface-visibility con un valore hidden . Nei miei test, questo li ha completamente attenuati. Spero possa aiutare.

 -webkit-backface-visibility: hidden; 

Se si utilizza la transition anziché la transform , -webkit-backface-visibility: hidden; non funziona. Un bordo frastagliato appare durante l’animazione per un file png trasparente.

Per risolverlo ho usato: outline: 1px solid transparent;

Prova la trasformazione 3D. Funziona come un fascino!

 /* Due to a bug in the anti-liasing*/ -webkit-transform-style: preserve-3d; -webkit-transform: rotateZ(2deg); 

L’aggiunta di un bordo trasparente 1px attiverà l’anti-aliasing

 outline: 1px solid transparent; 

In alternativa, aggiungi un box-shadow trasparente 1px.

 box-shadow: 0 0 1px rgba(255,255,255,0); 

La risposta scelta (né alcuna delle altre risposte) non ha funzionato per me, ma questo ha fatto:

img {outline:1px solid transparent;}

Ho riscontrato un problema con un gradiente CSS3 con -45deg. Lo background inclinato, era molto seghettato simile ma peggiore del post originale. Così ho iniziato a giocare con entrambe le background-size dello background-size . Ciò avrebbe allungato la frastagliatura, ma era ancora lì. Poi ho letto che anche altre persone hanno problemi con incrementi di 45 gradi, quindi ho regolato da -45deg a -45.0001deg e il mio problema è stato risolto.

Nel mio CSS di seguito, la background-size era inizialmente di 30px e il deg di sfumatura dello sfondo era esattamente -45deg e tutti i fotogrammi chiave erano 30px 0 .

  @-webkit-keyframes progressStripeLTR { to { background-position: 60px 0; }; } @-moz-keyframes progressStripeLTR { to { background-position: 60px 0; }; } @-ms-keyframes progressStripeLTR { to { background-position: 60px 0; }; } @-o-keyframes progressStripeLTR { to { background-position: 60px 0; }; } @keyframes progressStripeLTR { to { background-position: 60px 0; }; } @-webkit-keyframes progressStripeRTL { to { background-position: -60px 0; }; } @-moz-keyframes progressStripeRTL { to { background-position: -60px 0; }; } @-ms-keyframes progressStripeRTL { to { background-position: -60px 0; }; } @-o-keyframes progressStripeRTL { to { background-position: -60px 0; }; } @keyframes progressStripeRTL { to { background-position: -60px 0; }; } .pro-bar-candy { width: 100%; height: 15px; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; background: rgb(187, 187, 187); background: -moz-linear-gradient( -45.0001deg, rgba(187, 187, 187, 1.00) 25%, transparent 25%, transparent 50%, rgba(187, 187, 187, 1.00) 50%, rgba(187, 187, 187, 1.00) 75%, transparent 75%, transparent ); background: -webkit-linear-gradient( -45.0001deg, rgba(187, 187, 187, 1.00) 25%, transparent 25%, transparent 50%, rgba(187, 187, 187, 1.00) 50%, rgba(187, 187, 187, 1.00) 75%, transparent 75%, transparent ); background: -o-linear-gradient( -45.0001deg, rgba(187, 187, 187, 1.00) 25%, transparent 25%, transparent 50%, rgba(187, 187, 187, 1.00) 50%, rgba(187, 187, 187, 1.00) 75%, transparent 75%, transparent ); background: -ms-linear-gradient( -45.0001deg, rgba(187, 187, 187, 1.00) 25%, transparent 25%, transparent 50%, rgba(187, 187, 187, 1.00) 50%, rgba(187, 187, 187, 1.00) 75%, transparent 75%, transparent ); background: linear-gradient( -45.0001deg, rgba(187, 187, 187, 1.00) 25%, transparent 25%, transparent 50%, rgba(187, 187, 187, 1.00) 50%, rgba(187, 187, 187, 1.00) 75%, transparent 75%, transparent ); background: -webkit-gradient( linear, right bottom, right top, color-stop( 25%, rgba(187, 187, 187, 1.00) ), color-stop( 25%, rgba(0, 0, 0, 0.00) ), color-stop( 50%, rgba(0, 0, 0, 0.00) ), color-stop( 50%, rgba(187, 187, 187, 1.00) ), color-stop( 75%, rgba(187, 187, 187, 1.00) ), color-stop( 75%, rgba(0, 0, 0, 0.00) ), color-stop( rgba(0, 0, 0, 0.00) ) ); background-repeat: repeat-x; -webkit-background-size: 60px 60px; -moz-background-size: 60px 60px; -o-background-size: 60px 60px; background-size: 60px 60px; } .pro-bar-candy.candy-ltr { -webkit-animation: progressStripeLTR .6s linear infinite; -moz-animation: progressStripeLTR .6s linear infinite; -ms-animation: progressStripeLTR .6s linear infinite; -o-animation: progressStripeLTR .6s linear infinite; animation: progressStripeLTR .6s linear infinite; } .pro-bar-candy.candy-rtl { -webkit-animation: progressStripeRTL .6s linear infinite; -moz-animation: progressStripeRTL .6s linear infinite; -ms-animation: progressStripeRTL .6s linear infinite; -o-animation: progressStripeRTL .6s linear infinite; animation: progressStripeRTL .6s linear infinite; } 

Potresti essere in grado di mascherare il frastaglio usando ombre sfocate. L’uso di -webkit-box-shadow invece di box-shadow farà in modo che non influisca sui browser non-webkit. Tuttavia, potresti voler controllare Safari e i browser webkit per dispositivi mobili.

Il risultato è leggermente migliore, ma ancora molto meno buono con gli altri browser:

con box shadow (lato inferiore)

Ho solo pensato di inserire la nostra soluzione perché avevamo lo stesso identico problema su Chrome / Windows.

Abbiamo provato la soluzione di @stevenWatkins qui sopra, ma avevamo ancora lo “stepping”.

Invece di

 -webkit-backface-visibility: hidden; 

Abbiamo usato:

 -webkit-backface-visibility: initial; 

Per noi questo è stato il trucco 🎉

Aggiungendo quanto segue al div che circonda l’elemento in questione, ho risolto questo problema per me.

 -webkit-transform-style: preserve-3d; 

I bordi frastagliati apparivano nella finestra del mio caso.

Per me era la proprietà CSS prospettiva che ha fatto il trucco:

 -webkit-perspective: 1000; 

Completamente illogico nel mio caso in quanto non utilizzo transizioni 3D, ma funziona comunque.

Per canvas in Chrome (versione 52)

Tutte le risposte elencate riguardano le immagini. Ma il mio problema riguarda canvas in chrome (v.52) con la trasformazione ruotata. Sono diventati frastagliati e tutti questi metodi non possono aiutare.

Soluzione che funziona per me:

  1. Fai una canvas più grande su 1 px per ogni lato => +2 px per larghezza e altezza;
  2. Disegna l’immagine con offset + 1px (in posizione 1,1 anziché 0,0) e dimensione fissa (la dimensione dell’immagine deve essere 2px inferiore alla dimensione della canvas)
  3. Applicare la rotazione richiesta

Così importanti blocchi di codice:

 // Unfixed version ctx.drawImage(img, 0, 0, 335, 218); // Fixed version ctx.drawImage(img, 1, 1, 335, 218); 
 /* This style should be applied for fixed version */ canvas { margin-left: -1px; margin-top:-1px; }