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;
}
22.0.1229.94 m
Antworten:
Eine andere Lösung wäre zu verwenden
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/ .
quelle
backface-visibility
Eigenschaft für dasimg
Element festgelegt werden muss. In meinem Fall war das Element, das die Deckkraft hat, das Element, das dasa
umhülltimg
, 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.div
s mitbackground-image
. @alpipego Danke für die Lösung!z-index
, damit der Hover-Effekt für mich richtig funktioniert.Aus irgendeinem Grund interpretiert Chrome die Position von Elementen ohne Deckkraft von 1 anders. Wenn Sie das CSS-Attribut
position:relative
auf Ihre a.img-Elemente anwenden, wird keine Links- / Rechtsbewegung mehr ausgeführt, da deren Deckkraft variiert.quelle
transform: translate3d(0px,0px,0px);
transform: translate3d(0px,0px,0px);
arbeiteteIch hatte das gleiche Problem, ich habe es mit CSS-Transformation drehen behoben. So was:
Es funktioniert gut in großen Browsern.
quelle
Eine andere Lösung, die dieses Problem für mich behoben hat, war das Hinzufügen der Regel:
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-change
gibt 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.quelle
Ich musste sowohl
backface-visibility
als auchtransform
Regeln anwenden , um diesen Fehler zu verhindern. So was:quelle
Ich hatte ein ähnliches Problem mit (Nicht-Opazitäts-) Filtern beim Schweben. Behoben durch Hinzufügen einer Regel zur Basisklasse mit:
quelle
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.
quelle
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:
Alle Gutschriften für diese Antwort über diese nachfolgende Antwort
quelle
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.
quelle
Die Lösung Alpipego wurde mir in diesem Problem serviert. Verwenden Sie
-webkit-backface-visibility: hidden;
damit das Bild keine Bewegung im Schwebeopazitätsübergangquelle
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:
quelle
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.
quelle
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.
quelle
Hatte das gleiche Problem, mein Fix war, die Klasse vor dem src in der Registerkarte img zu setzen.
quelle