Testo sfocato dopo aver usato CSS transform: scale (); in Chrome

Sembra che ci sia stato un recente aggiornamento a Google Chrome che causa testo sfocato dopo aver eseguito un file transform: scale(). Nello specifico sto facendo questo:

@-webkit-keyframes bounceIn {
  0% {
    opacity: 0;
    -webkit-transform: scale(.3);
  }

  50% {
    opacity: 1;
    -webkit-transform: scale(1.05);
  }

  70% {
    -webkit-transform: scale(.9);
  }

  100% {
    -webkit-transform: scale(1);
  }
}

Se visiti http://rourkery.com in Chrome, dovresti vedere il problema nell'area di testo principale. Non lo faceva e non sembra influenzare altri browser webkit (come Safari). C'erano altri post su persone che hanno riscontrato un problema simile con le trasformazioni 3d, ma non riesco a trovare nulla sulle trasformazioni 2d come questa.

Tutte le idee sarebbero apprezzate, grazie!

Ho riscontrato questo problema diverse volte e sembra che ci siano 2 modi per risolverlo (mostrato di seguito). È possibile utilizzare una di queste proprietà per correggere il rendering o entrambe contemporaneamente.

La visibilità della faccia posteriore nascosta risolve il problema in quanto semplifica l'animazione solo nella parte anteriore dell'oggetto, mentre lo stato predefinito è il fronte e il retro.

backface-visibility: hidden;

TranslateZ funziona anche in quanto è un trucco per aggiungere l'accelerazione hardware all'animazione.

transform: translateZ(0);

Entrambe queste proprietà risolvono il problema che stai riscontrando, ma ad alcune persone piace anche aggiungere

-webkit-font-smoothing: subpixel-antialiased;

al loro animato all'obiezione. Trovo che possa cambiare il rendering di un font web, ma sentiti libero di sperimentare anche quel metodo.

Per migliorare la sfocatura, esp. su Chrome, prova a farlo:

transform: perspective(1px) translateZ(0);
backface-visibility: hidden;

AGGIORNAMENTO: La prospettiva aggiunge la distanza tra l'utente e il piano z, che tecnicamente ridimensiona l'oggetto, facendo sembrare la sfocatura "permanente". Quanto perspective(1px)sopra è come il nastro adesivo perché stiamo abbinando la sfocatura che stiamo cercando di risolvere. Potresti avere più fortuna con il css di seguito:

transform: translateZ(0);
backface-visibility: hidden;

Ho scoperto che la regolazione del rapporto di scala ha aiutato leggermente.

L'uso di scale(1.048)over (1.05)sembrava generare una migliore approssimazione alla dimensione del carattere di un intero pixel, riducendo la sfocatura dei sub-pixel.

Ho anche usato translateZ(0)che sembra regolare il passaggio di arrotondamento finale di Chrome nell'animazione di trasformazione. Questo è un vantaggio per il mio utilizzo onhover perché aumenta la velocità e riduce il rumore visivo. Per una funzione onclick, tuttavia, non la userei perché il carattere trasformato non sembra essere così croccante.

Dopo aver provato tutto il resto qui senza fortuna, ciò che alla fine ha risolto questo problema per me è stato rimuovere la will-change: transform;proprietà. Per qualche motivo ha causato un ridimensionamento orribilmente sfocato in Chrome, ma non in Firefox.

Invece di

transform: scale(1.5);

utilizzando

zoom : 150%;

risolve il problema di sfocatura del testo in Chrome.

Questo deve essere un bug con Chrome (versione 56.0.2924.87), ma quanto segue risolve la sfocatura per me quando si modificano le proprietà css nella console ('. 0'). Lo segnalerò.

filter: blur(.0px)

Sunderls mi ha portato alla risposta. Tranne filter: scaleche non esiste, ma filter: bluresiste.

Applica le dichiarazioni successive agli elementi che appaiono sfocati (nel mio caso erano all'interno di un elemento trasformato):

backface-visibility: hidden;    
-webkit-filter: blur(0);

Ha funzionato quasi perfettamente. " Quasi " perché sto usando una transizione e durante la transizione gli elementi non sembrano perfetti, ma una volta completata la transizione, lo fanno.

Ho scoperto che il problema si verifica in qualche modo sulle trasformazioni relative. translateX (50%), scale (1.1) o altro. fornire valori assoluti funziona sempre (non produce testo sfocato (ures)).

Nessuna delle soluzioni menzionate qui ha funzionato e penso che non ci sia ancora una soluzione (usando Chrome 62.0.3202.94 mentre sto scrivendo questo).

Nel mio caso transform: translateY(-50%) translateX(-50%)provoca la sfocatura (voglio centrare una finestra di dialogo).

Per raggiungere valori un po 'più "assoluti", ho dovuto impostare valori decimali su transform: translateY(-50.09%) translateX(-50.09%).

NOTA

Sono abbastanza sicuro che questi valori variano a seconda delle dimensioni dello schermo. Volevo solo condividere le mie esperienze, nel caso aiutasse qualcuno.

Ho trovato una soluzione molto migliore e pulita:

.element{
 transform:scale(0.5) 
 transform-origin: 100% 0;
}

o

.element{
 transform:scale(0.5) 
 transform-origin: 0% 0;
}

Grazie a questo post: Prevenire il rendering sfocato con transform: scale

L'aggiunta ha perspective(1px)funzionato per me.

transform: scale(1.005);

per

transform: scale(1.005) perspective(1px);

Prova a utilizzare zoom: 101%;per progetti complessi quando non puoi utilizzare una combinazione di zoom + scala.

Nel mio caso il codice seguente ha causato un carattere sfocato:

-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);

e solo l'aggiunta della proprietà zoom lo ha risolto per me. Gioca con lo zoom, quanto segue ha funzionato per me:

zoom: 97%;   

Un'altra soluzione da provare che ho appena trovato per le trasformazioni sfocate (translate3d, scaleX) su Chrome è impostare l'elemento come " display: inline-table ;". In alcuni casi sembra forzare l'arrotondamento dei pixel (sull'asse X).

Ho letto che il posizionamento dei subpixel in Chrome era previsto e gli sviluppatori non lo risolveranno.

Aggiornamento 2019
Il bug del display di Chrome non è ancora stato risolto e, sebbene non sia colpa degli utenti, nessuno dei suggerimenti offerti nella totalità di questo sito Web aiuta a risolvere il problema. Posso concordare di aver provato tutti invano: solo 1 si avvicina e questa è la regola css: filtro: sfocatura (0); che elimina lo spostamento di un contenitore di 1px ma non risolve il bug di visualizzazione sfocata del contenitore stesso e di qualsiasi contenuto che potrebbe avere.

Ecco la realtà: non esiste letteralmente alcuna soluzione a questo problema, quindi ecco un modo per aggirare i siti Web fluidi

CASO
Attualmente sto sviluppando un sito web fluido e ho 3 div, tutti centrati con effetti al passaggio del mouse e condividendo valori percentuali sia in larghezza che in posizione. Il bug di Chrome si verifica sul contenitore centrale che è impostato a sinistra: 50%; e trasformare: translateX (-50%); un ambiente comune.

ESEMPIO: prima l'HTML ...

<div id="box1" class="box">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry"s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</div>

<div id="box2" class="box">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry"s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</div>

<div id="box3" class="box">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry"s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</div>

Ecco il CSS in cui si verifica il bug di Chrome ...

*{margin:0; padding:0; border:0; outline:0; box-sizing:border-box;  background:#505050;}
.box {position:absolute; border:1px solid #fff; border-radius:10px; width:26%; background:#8e1515; padding:25px; top:20px; font-size:12pt; color:#fff; overflow:hidden; text-align:center; transition:0.5s ease-in-out;}
.box:hover {background:#191616;}
.box:active {background:#191616;}
.box:focus {background:#191616;}
#box1 {left:5%;}
#box2 {left:50%; transform:translateX(-50%);} /* Bugged */
#box3 {right:5%;}

Ecco il css corretto ...

*{margin:0; padding:0; border:0; outline:0; box-sizing:border-box;  background:#505050;}
.box {position:absolute; border:1px solid #fff; border-radius:10px; width:26%; background:#8e1515; padding:25px; top:20px; font-size:12pt; color:#fff; overflow:hidden; text-align:center; transition:0.5s ease-in-out;}
.box:hover {background:#191616;}
.box:active {background:#191616;}
.box:focus {background:#191616;}
#box1 {left:5%;}
#box2 {left:37%;} /* Fixed */
#box3 {right:5%;}

Violino con bug: https://jsfiddle.net/m9bgrunx/2/
Violino fisso: https://jsfiddle.net/uoc6e2dm/2/

Come puoi vedere, una piccola quantità di modifiche al CSS dovrebbe ridurre o eliminare la necessità di utilizzare la trasformazione per il posizionamento. Ciò potrebbe essere applicato anche a siti Web a larghezza fissa e fluidi.

Ho lo stesso problema. Ho risolto questo problema usando:

.element {
  display: table
}

Nessuno dei precedenti ha funzionato per me. Ho avuto questa animazione per i popup:

@keyframes pulse {
  from {
    transform: scale3d(1, 1, 1);
  }
  50% {
    transform: scale3d(1.05, 1.05, 1.05);
  }
  to {
    transform: scale3d(1, 1, 1);
  }
}

Nel mio caso l'effetto sfocato era sparito dopo aver applicato questa regola: -webkit-perspective: 1000;anche se è contrassegnato come non utilizzato in Chrome Inspector.

La mia soluzione era:

display: iniziale;

Poi è stato croccante

Nessuno dei precedenti ha funzionato per me.

Ha funzionato quando ho aggiunto la prospettiva

cioè da

transform : translate3d(-10px,-20px,0) scale3d(0.7,0.7, 1)

ho cambiato in

transform : perspective(1px) translate3d(-10px,-20px,0) scale3d(0.7,0.7, 1)

Ho risolto il mio caso aggiungendo:

transform: perspective(-1px)

PER CHORME:

Ho provato tutti i suggerimenti qui. Ma non ha funzionato. Il mio college ha trovato un'ottima soluzione, che funziona meglio:

NON dovresti scalare oltre 1.0

E includi translateZ(0)nel passaggio del mouse ma NON nella posizione iniziale / nessuno.

Esempio:

a {
    transition: all 500ms cubic-bezier(0.165, 0.840, 0.440, 1.000);
    transform: scale(0.8, 0.8);
}

a:hover {
    transform: translateZ(0)scale(1.0, 1.0);
}

Ho usato una combinazione di tutte le risposte e questo è ciò che ha funzionato per me alla fine:

.modal .modal--transition {
  display: inline-table;
  transform: perspective(1px) scale(1) translateZ(0);
  backface-visibility: hidden;
  -webkit-font-smoothing: subpixel-antialiased;
}

Stavo affrontando il problema del testo sfocato su Chrome ma non su Firefox quando l'ho usato transform: translate(-50%,-50%).

Bene, ho davvero provato molte soluzioni alternative come:

transform: perspective(1px);

filter: blur(0);

transform: translateZ(0);

backface-visibility: hidden;

Nessuno di questi ha funzionato per me.

Infine, ho uniformato l'altezza e la larghezza dell'elemento. Ha risolto il problema per me !!!

Nota: potrebbe dipendere dal caso d'uso al caso d'uso. Ma sicuramente vale la pena provare!

Ho provato molti esempi da queste risposte, purtroppo, nulla di aiuto per Chrome Version 81.0.4044.138 che ho aggiunto invece all'elemento di trasformazione

 transform-origin: 50% 50%;

questo

 transform-origin: 51% 51%;

per me aiuta

Per me il problema era che i miei elementi stavano usando transformStyle: preserve-3d. Mi sono reso conto che questo non era effettivamente necessario per l'app e rimuoverlo ha risolto la sfocatura.

L'ho rimosso dal mio codice transform-style: preserve-3d; e l' ho aggiuntotransform: perspective(1px) translateZ(0);

il mosso è andato via!

In Chrome 74.0.3729.169, corrente dal 25 al 25-19, non sembra esserci alcuna correzione per la sfocatura che si verifica a determinati livelli di zoom del browser causati dalla trasformazione. Anche un semplice TransformY(50px)sfocerà l'elemento. Ciò non si verifica nelle versioni correnti di Firefox, Edge o Safari e non sembra verificarsi a tutti i livelli di zoom.

Sarà difficile da risolvere solo con css.

Quindi l'ho risolto con jquery.

Questo è il mio CSS.

.trY {
   top: 50%;
   transform: translateY(-50%);
}

.trX {
   left: 50%;
   transform: translateX(-50%);
}

.trXY {
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
}

e questo è il mio jquery.

function tr_init() {
$(".trY, .trX, .trXY").each(function () {
    if ($(this).outerWidth() % 2 != 0) {
        var fixed_width = Math.ceil($(this).outerWidth() / 2) * 2;
        $(this).css("width", fixed_width);
    }
    if ($(this).outerHeight() % 2 != 0) {
        var fixed_height = Math.ceil($(this).outerHeight() / 2) * 2;
        $(this).css("height", fixed_height);
    }
})}

Solo per aumentare la mania delle correzioni, mettere {border: 1px solid # ???} attorno all'oggetto dall'aspetto sgradevole risolve il problema per me. Se hai un colore di sfondo stabile, considera anche questo. Questo è così stupido che nessuno ha pensato di menzionarlo, immagino, eh eh.

puoi usare CSS filterper risolvere questo problema.

.element {
    filter: blur(0);
}

riguardo al prefisso del fornitore, fallo da solo. -webkit-filter, -ms-filter. i dettagli sono qui http://browser.colla.me/show/css_transformation_scale_cause_blurring

Il testo non sarà sfocata se non transitionlatransform .

Basta fare questo:

&:hover {
    transform: scale(1.1);
}

Senza la transizione mi piace transition: all .2s;