WebKit: testo sfocato con scala css + translate3d

Question

Sto riscontrando un problema in cui Chrome e altri browser WebKit sfocatura in modo massivo qualsiasi contenuto scalato in css che ha applicato anche translate3d.

Ecco un JS Fiddle: http://jsfiddle.net/5f6Wg/. (Vedi in Chrome.)

.test { 
 
    -webkit-transform: translate3d(0px, 100px, 0px); 
 
} 
 

 
.testInner 
 
{ 
 
    /*-webkit-transform: scale(1.2);*/ 
 
    -webkit-transform: scale3d(1.2, 1.2, 1); 
 
    text-align: center; 
 
}

<div class="test"> 
 
    <div class="testInner"> 
 
    This is blurry in Chrome/WebKit when translate3d and scale or scale3d are applied. 
 
    </div> 
 
</div>

Esistono soluzioni alternative note per questo? Lo prendo nel semplice esempio sopra, potrei semplicemente usare translate piuttosto che translate3d - il punto qui è quello di spogliare il codice fino all'essenziale.

Answer 1

Webkit tratta gli elementi trasformati 3d come trame anziché vettori per fornire l'accelerazione hardware 3d. L'unica soluzione a questo sarebbe aumentare la dimensione del testo e ridimensionare l'elemento, in pratica creando una texture di res più alta.

vedere qui: http://jsfiddle.net/SfKKv/

Nota che antialiasing è ancora underpar (steli sono perse) quindi sto rinforzando il testo con un po 'd'ombra del testo.

Answer 2

Webkit tratta gli elementi trasformati 3d come trame anziché i vettori per fornire l'accelerazione hardware 3d.

Questo non ha nulla a che fare con questo. Noterai che il tuo problema di aliasing può essere risolto aggiungendo informazioni sulla durata e sulla direzione (ad es. 0.3 lineare). Il vostro avendo una cavalla cercando di rendere tutto in fase di esecuzione:

Lo stesso per quanto sopra^

Answer 3

body { 
-webkit-font-smoothing: subpixel-antialiased; 
} 

o Penso che si potrebbe mettere che su un elemento specifico, ma ho avuto problemi con un elemento che colpisce l'intera luogo.

Penso che sia un problema con i font personalizzati con font-face.

Answer 4

Mi sono imbattuto in questo problema quando si utilizza il plug-in isotopo (http://isotope.metafizzy.co/index.html) in combinazione con il plug-in zoom (http://janne.aukia.com/zoomooz/). Ho creato un plugin jQuery per gestire il mio caso. L'ho gettato in un repository Github nel caso in cui qualcuno potesse trarne beneficio. - https://github.com/charleshimmer/jquery-hirestext.

Answer 5

ho trovato che l'uso di:

-webkit-perspective: 1000; 

sul contenitore del vostro carattere o set di icone mantenuto le cose nitide per me dopo esperimento con l'emissione su Android Nexus 4.2 per qualche tempo.

Answer 6

Un effetto di filtro css è un'operazione grafica che consente di manipolare l'aspetto di qualsiasi elemento HTML. Dal momento che Chromium 19 questi filtri sono accelerati dalla GPU per renderli super veloci.

CSS3 introduce una serie di effetti filtranti standard, uno di questi è fitler sfocatura:

-webkit-filter: blur(radius); 

Il parametro 'radius' influenza quanti pixel sullo schermo fondono a vicenda, così un valore maggiore creerà più sfocatura. Ovviamente, l'immagine rimane invariata.

Impostare il raggio su 0 obbligherà il browser a utilizzare il calcolo GPU e lo imporrà per mantenere invariato il proprio elemento html. È come applicare effetti "bordi duri".

Quindi la soluzione migliore per me per risolvere questo effetto sfocato è stato quello di aggiungere questo semplice riga di codice:

-webkit-filter: blur(0); 

C'è anche un bug noto che colpisce solo gli schermi retina. (Vedi qui: Why doesn't blur(0) remove all text blur in Webkit/Chrome on retina screens?). Quindi, al fine di renderlo funziona anche per la retina, vi consiglio di aggiungere questa seconda linea:

-webkit-transform: translateZ(0); 

Answer 7

ho usato javascript per spostare il testo top 1px e poi con 100 ms dopo, di nuovo verso il basso 1px. È quasi insensibile e ha risolto completamente il problema del cross-browser.

Answer 8

Prova questa

...{ 
zoom:2; 
-webkit-transform: scale(0.5); 
transform: scale(0.5); 
} 

O per un approccio più precisa si può chiamare una funzione javascript per ricalcolare la matrice di trasformazione rimuovendo i valori decimali della matrice. vedi: https://stackoverflow.com/a/42256897/1834212