L'effetto di transizione CSS rende l'immagine sfocata / sposta l'immagine di 1 pixel, in Chrome?

Ho alcuni CSS che al passaggio del mouse, un effetto di transizione CSS sposta un div.

Il problema, come puoi vedere nell'esempio, è che la translatetransizione ha l'orribile effetto collaterale di far muovere l'immagine nel div di 1px in basso / a destra (e possibilmente ridimensionarla leggermente?) In modo che appaia fuori posto e sfocato...

Il glitch sembra applicarsi per tutto il tempo in cui viene applicato l'effetto hover, e da un processo di tentativi ed errori posso tranquillamente dire che sembra verificarsi solo quando la transizione di traduzione sposta il div (vengono applicate anche l'ombra della scatola e l'opacità, ma non fa differenza per l'errore quando rimosso).

Il problema sembra verificarsi solo quando la pagina ha barre di scorrimento. Quindi l'esempio con una sola istanza del div va bene, ma una volta aggiunti div più identici e la pagina richiede quindi una barra di scorrimento, il problema si ripresenta ...

Aggiornamento 2020

• Se hai problemi con le immagini sfocate, assicurati di controllare anche le risposte dal basso, in particolare la image-renderingproprietà CSS.
• Per l'accessibilità delle migliori pratiche e per quanto riguarda la SEO, puoi sostituire l'immagine di sfondo con un <img>tag usando la proprietà CSS adatta all'oggetto .

Risposta originale

Prova questo nel tuo CSS :

.your-class-name {
    /* ... */
    -webkit-backface-visibility: hidden;
    -webkit-transform: translateZ(0) scale(1.0, 1.0);
}

Ciò che fa è rendere la divisione comportarsi "più 2D".

• Backface è disegnato come predefinito per consentire di capovolgere le cose con Ruota e così via. Non è necessario se si sposta solo a sinistra, a destra, in alto, in basso, in scala o in senso antiorario.
• Traduci l'asse Z per avere sempre un valore zero.
• Chrome ora gestisce backface-visibilitye transformsenza il -webkit-prefisso. Al momento non so come questo influisca sul rendering di altri browser (FF, IE), quindi usa le versioni senza prefisso con cautela.

È necessario applicare la trasformazione 3d all'elemento, in modo da ottenere il proprio livello composito. Per esempio:

.element{
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

o

.element{
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}

Ulteriori informazioni sui criteri di creazione dei livelli sono disponibili qui: Rendering accelerato in Chrome

Una spiegazione:

Esempi (hover box verde):

• Problema: la transizione può causare effetti di lampeggiamento su elementi fratelli (OSx Lion, Chrome 30)
• Soluzione: un elemento sul proprio strato composito

Quando usi una transizione sul tuo elemento, il browser ricalcola gli stili, quindi ridimensiona il tuo contenuto anche se la proprietà di transizione è visiva (nei miei esempi è un'opacità) e infine dipinge un elemento:

Il problema qui è il ridimensionamento del contenuto che può avere l'effetto di "ballare" o "sbattere le palpebre" elementi sulla pagina durante la transizione. Se andrai alle impostazioni, seleziona la casella di controllo "Mostra livelli compositi" e quindi applica la trasformazione 3d a un elemento, vedrai che ottiene il proprio livello delineato con un bordo arancione.

Dopo che l'elemento ha ottenuto il proprio livello, il browser deve solo comporre i livelli durante la transizione senza ricollocamento o persino operazioni di disegno, quindi il problema deve essere risolto:

Aveva lo stesso problema con iframe incorporato di YouTube (le traduzioni venivano usate per centrare l'elemento iframe). Nessuna delle soluzioni sopra ha funzionato fino a quando non si è verificato il ripristino dei filtri CSS e la magia.

Struttura:

<div class="translate">
     <iframe/>
</div>

Stile [prima]

.translate {
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
}

Stile [dopo]

.translate {
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  filter: blur(0);
  -webkit-filter: blur(0);
}

Ho raccomandato un nuovo attributo sperimentale CSS che ho testato sull'ultimo browser ed è buono:

image-rendering: optimizeSpeed;             /*                     */
image-rendering: -moz-crisp-edges;          /* Firefox             */
image-rendering: -o-crisp-edges;            /* Opera               */
image-rendering: -webkit-optimize-contrast; /* Chrome (and Safari) */
image-rendering: optimize-contrast;         /* CSS3 Proposed       */
-ms-interpolation-mode: nearest-neighbor;   /* IE8+                */

Con questo il browser conoscerà l'algoritmo per il rendering

Ho appena trovato un altro motivo per cui un elemento diventa sfocato quando viene trasformato. Stavo usando transform: translate3d(-5.5px, -18px, 0);per riposizionare un elemento una volta che era stato caricato, tuttavia quell'elemento è diventato sfocato.

Ho provato tutti i suggerimenti sopra ma ho scoperto che era dovuto a me usare un valore decimale per uno dei valori di traduzione. Numeri interi non causano la sfocatura, e più mi allontanavo da tutto il numero, peggiore diventava la sfocatura.

cioè 5.5pxsfoca l'elemento di più, 5.1pxil meno.

Ho pensato di buttarlo qui nel caso in cui fosse d'aiuto a qualcuno.

Ho imbrogliato il problema usando la transizione per passaggi, non uniformemente

transition-timing-function: steps(10, end);

Non è una soluzione, è un imbroglio e non può essere applicato ovunque.

Non posso spiegarlo, ma funziona per me. Nessuna altra risposta mi aiuta (OSX, Chrome 63, display non Retina).

https://jsfiddle.net/tuzae6a9/6/

Ridimensionare per raddoppiare e ridurre della metà con zoomlavorato per me.

transform: scale(2);
zoom: 0.5;

Ho provato circa 10 possibili soluzioni. Li ho mescolati e ancora non funzionavano correttamente. Alla fine c'era sempre un frullato di 1px.

Trovo la soluzione riducendo il tempo di transizione sul filtro.

Questo non ha funzionato:

.elem {
  filter: blur(0);
  transition: filter 1.2s ease;
}
.elem:hover {
  filter: blur(7px);
}

Soluzione:

.elem {
  filter: blur(0);
  transition: filter .7s ease;
}
.elem:hover {
  filter: blur(7px);
}

Prova questo nel violino:

.blur {
  border: none;
  outline: none;
  width: 100px; height: 100px;
  background: #f0f;
  margin: 30px;
  -webkit-filter: blur(10px);
  transition: all .7s ease-out;
  /* transition: all .2s ease-out; */
}
.blur:hover {
  -webkit-filter: blur(0);
}

.blur2 {
  border: none;
  outline: none;
  width: 100px; height: 100px;
  background: tomato;
  margin: 30px;
  -webkit-filter: blur(10px);
  transition: all .2s ease-out;
}
.blur2:hover {
  -webkit-filter: blur(0);
}

<div class="blur"></div>

<div class="blur2"></div>

Spero che questo aiuti qualcuno.

Provare filter: blur(0);

Ha funzionato per me

Per me, ora nel 2018. L'unica cosa che ha risolto il mio problema (una linea bianca tremolante sfarfallio che attraversa un'immagine al passaggio del mouse) è stata applicare questo al mio elemento di collegamento che contiene l'elemento di immagine che ha transform: scale(1.05)

a {
   -webkit-backface-visibility: hidden;
   backface-visibility: hidden;
   -webkit-transform: translateZ(0) scale(1.0, 1.0);
   transform: translateZ(0) scale(1.0, 1.0);
   -webkit-filter: blur(0);
   filter: blur(0);
}
a > .imageElement {
   transition: transform 3s ease-in-out;
}

filter: blur(0)
transition: filter .3s ease-out
transition-timing-function: steps(3, end) // add this string with steps equal duration

Sono stato aiutato impostando il valore della durata della transizione in modo .3suguale per i tempi di transizione.3s

Ho appena avuto lo stesso problema. Prova a impostare la posizione: relativa all'elemento genitore, che ha funzionato per me.