Bild bewegt sich beim Schweben - Problem mit der Chromopazität

Es scheint ein Problem mit meiner Seite hier zu geben: http://www.lonewulf.eu

Wenn Sie mit der Maus über die Miniaturansichten fahren, bewegt sich das Bild etwas nach rechts, und dies geschieht nur in Chrome.

Mein 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;
}

Eine andere Lösung wäre zu verwenden

-webkit-backface-visibility: hidden;

auf dem Schwebeelement, das die Deckkraft hat. Die Sichtbarkeit der Rückseite bezieht sich auf transform, also hat @Beskow etwas damit zu tun. Da es sich um ein Webkit-spezifisches Problem handelt, müssen Sie nur die Sichtbarkeit der Rückseite für das Webkit angeben. Es gibt andere Herstellerpräfixe .

Weitere Informationen finden Sie unter http://css-tricks.com/almanac/properties/b/backface-visibility/ .

Aus irgendeinem Grund interpretiert Chrome die Position von Elementen ohne Deckkraft von 1 anders. Wenn Sie das CSS-Attribut position:relativeauf Ihre a.img-Elemente anwenden, wird keine Links- / Rechtsbewegung mehr ausgeführt, da deren Deckkraft variiert.

Ich hatte das gleiche Problem, ich habe es mit CSS-Transformation drehen behoben. So was:

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

Es funktioniert gut in großen Browsern.

Eine andere Lösung, die dieses Problem für mich behoben hat, war das Hinzufügen der Regel:

will-change: opacity;

In meinem speziellen Fall wurde dadurch ein ähnliches Pixel-Jumping-Problem vermieden, translateZ(0)das in Internet Explorer eingeführt wurde, obwohl Probleme in Chrome behoben wurden.

Die meisten anderen Lösungen vorgeschlagen , die hier beteiligt Transformationen (zB. translateZ(0), rotate(0), translate3d(0px,0px,0px), Etc.) Arbeit durch Gabe des Elements Übermalungen auf die GPU, so dass eine effizientere Rendering.will-changegibt dem Browser einen Hinweis, der vermutlich einen ähnlichen Effekt hat (wodurch der Browser den Übergang effizienter rendern kann), sich jedoch weniger hackig anfühlt (da das Problem explizit angesprochen wird, anstatt nur den Browser zur Verwendung der GPU anzutreiben).

Trotzdem lohnt es sich, daran zu denken Browserunterstützung nicht so gut ist will-change(wenn das Problem jedoch nur bei Chrome auftritt, ist dies möglicherweise eine gute Sache!), Und in einigen Situationen kann dies zu eigenen Problemen führen , aber dennoch ist es eine weitere mögliche Lösung für dieses Problem.

Ich musste sowohl backface-visibilityals auch transformRegeln anwenden , um diesen Fehler zu verhindern. So was:

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

Ich hatte ein ähnliches Problem mit (Nicht-Opazitäts-) Filtern beim Schweben. Behoben durch Hinzufügen einer Regel zur Basisklasse mit:

filter: brightness(1.01);

Backface-Sichtbarkeit (oder -webkit-Backface-Sichtbarkeit) hat das Problem in Chrome nur für mich behoben. Um sowohl in Firefox als auch in Chrome Fehler zu beheben, habe ich die folgende Kombination der obigen Antworten verwendet.

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

In Safari 8.0.2 ist ein ähnliches Problem aufgetreten, bei dem Bilder beim Übergang ihrer Deckkraft zittern. Keine der hier veröffentlichten Korrekturen funktionierte, jedoch die folgenden:

-webkit-transform: translateZ(0);

Alle Gutschriften für diese Antwort über diese nachfolgende Antwort

Ich bin auf dieses Problem mit Bildern in einem Raster gestoßen. Jedes Bild war in einem Bild verschachtelt, dessen Anzeige: Inline-Block deklariert war. Die oben veröffentlichte Lösung von Jamland hat das Problem behoben, wenn die Anzeige: Inline-Block; wurde für das übergeordnete Element deklariert.

Ich hatte ein anderes Raster, in dem sich die Bilder in einer ungeordneten Liste befanden, und konnte nur die Anzeige deklarieren: block; und eine Breite auf dem übergeordneten Listenelement und deklarierte Sichtbarkeit der Rückseite: versteckt; auf dem Bildelement und es scheint keine Positionsverschiebung beim Schweben zu geben.

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

Die Lösung Alpipego wurde mir in diesem Problem serviert. Verwenden Sie -webkit-backface-visibility: hidden; damit das Bild keine Bewegung im Schwebeopazitätsübergang

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

Ich hatte Probleme mit allen anderen Lösungen hier, da sie Änderungen am CSS erfordern, die andere Dinge beschädigen können - position: relative erfordert, dass ich völlig überlege, wie ich meine Elemente positioniere, transform: rotate (0) kann vorhandene beeinträchtigen transformiert und gibt wackelige kleine Übergangseffekte, wenn ich eine Übergangsdauer festgelegt habe, und die Sichtbarkeit der Rückseite funktioniert nicht, wenn ich jemals eine Rückseite benötige (und eine ganze Menge Präfixe erfordert).

Die faulste Lösung, die ich gefunden habe, besteht darin, einfach eine Deckkraft für mein Element festzulegen, die sehr nahe, aber nicht ganz bei 1 liegt. Dies ist nur dann ein Problem, wenn die Deckkraft 1 ist, sodass keiner meiner anderen Stile unterbrochen oder beeinträchtigt wird:

opacity:0.99999999;

Nachdem ich Rick Giners Antwort als richtig markiert hatte, stellte ich fest, dass das Problem dadurch nicht behoben wurde.

In meinem Fall habe ich Bilder mit ansprechender Breite, die in einem Div mit maximaler Breite enthalten sind. Sobald die Site-Breite diese maximale Breite überschreitet, bewegen sich die Bilder beim Schweben (mithilfe der CSS-Transformation).

Die Lösung in meinem Fall bestand darin, die maximale Breite einfach auf ein Vielfaches von drei, drei Spalten in diesem Fall zu ändern, und sie wurde perfekt behoben.

Mir ist aufgefallen, dass Ihr CSS Deckkraft enthält. Ich hatte genau das gleiche Problem mit Chrome (das Bild bewegt sich beim Schweben). Alles, was ich getan habe, war die Deckkraft zu deaktivieren und es wurde behoben, keine Bilder mehr bewegten sich.

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

Hatte das gleiche Problem, mein Fix war, die Klasse vor dem src in der Registerkarte img zu setzen.