l'immagine si sposta al passaggio del mouse - problema di opacità del cromo

Sembra che ci sia un problema con la mia pagina qui: http://www.lonewulf.eu

Quando si passa con il mouse sulle miniature, l'immagine si sposta leggermente a destra e accade solo su Chrome.

Il mio css:

.img{
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    filter:alpha(opacity=50);
    -moz-opacity: 0.5; 
    opacity: 0.5;
    -khtml-opacity: 0.5;
    display:block;
    border:1px solid #121212;
}
.img:hover{
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter:alpha(opacity=100);
    -moz-opacity: 1; 
    opacity: 1;
    -khtml-opacity: 1;  
    display:block;
}

Un'altra soluzione potrebbe essere quella di utilizzare

-webkit-backface-visibility: hidden;

sull'elemento al passaggio del mouse che ha l'opacità. La visibilità della faccia posteriore si riferisce a transform, quindi quella di @Beskow ha qualcosa a che fare con essa. Poiché si tratta di un problema specifico del webkit, devi solo specificare la visibilità del backface per il webkit. Ci sono altri prefissi di fornitori .

Vedi http://css-tricks.com/almanac/properties/b/backface-visibility/ per maggiori informazioni.

Per qualche motivo Chrome interpreta la posizione degli elementi senza un'opacità di 1 in un modo diverso. Se applichi l'attributo CSS position:relativeai tuoi elementi a.img non ci sarà più movimento sinistra / destra al variare della loro opacità.

Ho avuto lo stesso problema, l'ho risolto con css transform rotate. Come questo:

-webkit-transform: rotate(0);
-moz-transform: rotate(0);
transform: rotate(0);

Funziona bene nei principali browser.

Un'altra soluzione che ha risolto questo problema per me è stata l'aggiunta della regola:

will-change: opacity;

Nel mio caso particolare, questo ha evitato un problema simile al salto dei pixel translateZ(0)introdotto in Internet Explorer, nonostante le correzioni in Chrome.

La maggior parte delle altre soluzioni proposte qui che coinvolgono trasforma (ad es. translateZ(0), rotate(0), translate3d(0px,0px,0px), Ecc) opera di consegna pittura dell'elemento verso la GPU, permettendo il rendering più efficiente.will-changefornisce un suggerimento al browser che presumibilmente ha un effetto simile (consentendo al browser di eseguire il rendering della transizione in modo più efficiente), ma si sente meno hacker (poiché affronta esplicitamente il problema piuttosto che spingere il browser a utilizzare la GPU).

Detto questo, vale la pena ricordare che il supporto del browser non è altrettanto buono will-change(anche se se il problema riguarda solo Chrome, questa potrebbe essere una buona cosa!) E in alcune situazioni può introdurre problemi di per sé , ma comunque , è un'altra possibile soluzione a questo problema.

Ero necessario applicare sia backface-visibilitye transformregole per evitare questo inconveniente. Come questo:

a     {-webkit-transform: rotate(0);}
a img {-webkit-backface-visibility: hidden;}

Ho avuto un problema simile con i filtri (non opacità) al passaggio del mouse. Risolto aggiungendo una regola alla classe base con:

filter: brightness(1.01);

backface-visibilità (o -webkit-backface-visibilità) ha risolto il problema solo in Chrome per me. Per risolvere sia in Firefox che in Chrome ho usato la seguente combinazione di risposte sopra.

//fixes image jiggle issue, please do not remove
img {
  -webkit-backface-visibility: hidden; //Webkit fix
  transform: translate3d(0px,0px,0px); //Firefox fix
}

Ho riscontrato un problema simile in Safari 8.0.2, in cui le immagini tremolavano durante la transizione della loro opacità. Nessuna delle correzioni pubblicate qui ha funzionato, tuttavia quanto segue ha funzionato:

-webkit-transform: translateZ(0);

Tutto merito di questa risposta tramite questa risposta successiva

Mi sono imbattuto in questo problema con le immagini in una griglia, ciascuna immagine era nidificata in una visualizzazione: inline-block dichiarato. La soluzione che Jamland ha pubblicato sopra ha funzionato per correggere il problema quando il display: inline-block; è stata dichiarata sull'elemento genitore.

Avevo un'altra griglia in cui le immagini erano in un elenco non ordinato e potevo semplicemente dichiarare la visualizzazione: blocco; e una larghezza sull'elemento dell'elenco genitore e dichiarata visibilità sul retro: nascosto; sull'elemento immagine e non sembra esserci alcun cambiamento di posizione al passaggio del mouse.

li { width: 33.33333333%; display: block; }
li img { backface-visibility: hidden; }

La soluzione alpipego mi è stata servita in questo problema. Usa -webkit-backface-visibility: hidden; Con questo l'immagine non si muove nella transizione dell'opacità al passaggio del mouse

/* fix error hover image opacity*/
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;

Ho avuto problemi con tutte le altre soluzioni qui, poiché richiedono modifiche al CSS che potrebbero rompere altre cose - position: relative mi richiede di ripensare completamente a come sto posizionando i miei elementi, transform: rotate (0) può interferire con l'esistente si trasforma e fornisce piccoli effetti di transizione traballanti quando ho un set di durata della transizione e la visibilità del backface non funzionerà se avrò mai effettivamente bisogno di un backface (e richiede un sacco di prefissi).

La soluzione più pigra che ho trovato è semplicemente impostare un'opacità sul mio elemento che è molto vicino, ma non del tutto, 1. Questo è un problema solo se l'opacità è 1, quindi non interromperà o interferirà con nessuno dei miei altri stili:

opacity:0.99999999;

Dopo aver contrassegnato la risposta di Rick Giner come corretta, ho scoperto che non ha risolto il problema.

Nel mio caso ho immagini di larghezza reattiva contenute in un div di larghezza massima. Una volta che la larghezza del sito supera quella larghezza massima, le immagini si spostano al passaggio del mouse (utilizzando la trasformazione CSS).

La soluzione nel mio caso era semplicemente modificare la larghezza massima in un multiplo di tre, tre colonne in questo caso, e l'ha risolto perfettamente.

Ho notato che hai incluso l'opacità nel tuo CSS. Ho avuto lo stesso identico problema con Chrome (l'immagine che si muoveva al passaggio del mouse) .. tutto ciò che ho fatto è stato disabilitare l'opacità ed è stato risolto, niente più immagini in movimento.

.yourclass:hover {
  /* opacity: 0.6; */
}

Ho avuto lo stesso problema, la mia soluzione è stata mettere la classe prima di src nella scheda img.