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

92

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;
}
zefs
quelle
Bewegt sich nicht für mich weiter22.0.1229.94 m
Danny
3
Es wird empfohlen, den Mauszeiger auf das A-Tag zu setzen, nicht auf das Bild selbst.
Diodeus - James MacFarlane
Ja .img ist eine href-Klasse. Soll ich ihm einen anderen Namen geben? Vielleicht widerspricht es jetzt <img src>? EDIT: Nvm, ich habe den Namen von .img in .thumb geändert und habe immer noch dieses Problem. Irgendein anderer Vorschlag?
Zefs
Es ist wahrscheinlich etwas, was Fancybox tut.
Diodeus - James MacFarlane
4
Die Verwendung einer Übersetzung auf der Z-Achse war die einzige Lösung, die für mich funktioniert hat: stackoverflow.com/questions/12502234/…
Larry

Antworten:

231

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/ .

Alpipego
quelle
Dies ist die richtige Antwort, aber Sie müssen sagen, dass die backface-visibilityEigenschaft für das imgElement festgelegt werden muss. In meinem Fall war das Element, das die Deckkraft hat, das Element, das das aumhüllt img, sodass Ihre Antwort für mich nicht perfekt war. Übrigens habe ich diesen Fehler auch bei Firefox für Mac gefunden, daher empfehle ich, alle Herstellerpräfixe zu verwenden.
Oliboy50
1
@ Oliboy50 Sorry, das muss ich argumentieren. Im meinem Fall die fehlerhaften Elemente waren nur leere divs mit background-image. @alpipego Danke für die Lösung!
Bonflash
1
Dies funktionierte für mich, ließ aber meine Bilder schlecht aussehen, pixelig statt glatt.
Kieran Hunter
1
Ich weiß nicht, warum es funktioniert, aber ich bin darauf gestoßen und habe es ausprobiert. Dies behebt einen Fehler, der seit Monaten auf meiner Website auftaucht und den ich nie herausfinden konnte. Danke dir!
Shnibble
Ich musste auch ein hinzufügen z-index, damit der Hover-Effekt für mich richtig funktioniert.
Jack
34

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.

Rick Giner
quelle
1
Weiß jemand warum das so ist? Sicher ist es keine hasLayout-Sache?
Sidonaldson
7
Hatte gerade das gleiche Problem in Firefox. Relative hat es nicht transform: translate3d(0px,0px,0px);
behoben
Ich hatte das gleiche Problem auf Safari und transform: translate3d(0px,0px,0px); arbeitete
zevnicsca
21

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.

Beskow
quelle
1
Danke dafür. Dies hat es in Firefox behoben! : D
Hans Wassink
Ja, ich auch. Der Backface-Trick hat bei mir nicht funktioniert (img in a), aber dieser hat funktioniert! Vielen Dank!
Mikmikmik
Dies ist die einzige Antwort, die bei mir funktioniert hat (Chrome). Vielen Dank!
Kid Diamond
14

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.

Nick F.
quelle
10

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;}
Jamland
quelle
10

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);
Juan Casares
quelle
Gleiches Problem mit einem Filterübergang beim Hover. Das hat es auch für mich behoben.
Josh Harrison
Filter verwenden: Helligkeit (1); auf dem img Element behoben es für mich, danke
Sai
Dies funktionierte für mich und hatte ein 1px-Problem beim Anwenden des Graustufenfilters auf ein Bild beim Schweben. Warum können Browser-Entwickler all diese Dinge nicht endgültig beheben? Warum muss ich Backface-Sichtbarkeit und all das Zeug verwenden ...
Varin
Dies behebt es, aber die Übergangsanimation funktioniert nicht mehr
Amin
6

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
}
andersra
quelle
4

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

James Fletcher
quelle
Versuchte alle anderen Antworten, dies war die erste, die funktionierte!
2

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; }
user2125009
quelle
2

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;
Lenin Zapata
quelle
2

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;
Josh aus Qaribou
quelle
1

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.

Sidonaldson
quelle
1
Vielen Dank für den Kommentar. Ich habe auch festgestellt, dass die relative Position nicht immer als Lösung funktioniert. Wenn dieses Problem erneut auftritt, werde ich auch Ihre Methode ausprobieren.
Zefs
0

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; */
}
cssninja
quelle
0

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

Beached As
quelle