webentwicklung-frage-antwort-db.com.de

bild bewegt sich im Schwebeflug - Problem mit der Opazität von Chrom

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

Wenn Sie den Mauszeiger über die Miniaturansichten bewegen, wird das Bild nach rechts verschoben und dies geschieht nur in Chrome.

Meine 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;
}
89
zefs

Eine andere Lösung wäre zu verwenden 

-webkit-backface-visibility: hidden;

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

Siehe http://css-tricks.com/almanac/properties/b/backface-visibility/ für weitere Informationen.

229
alpipego

Aus irgendeinem Grund interpretiert Chrome die Position von Elementen ohne Deckkraft von 1 auf andere Weise. Wenn Sie das CSS-Attribut position:relative auf Ihre a.img -Elemente anwenden, wird es keine Links-/Rechts-Bewegung mehr geben, da die Deckkraft variiert.

33
Rick Giner

Ich hatte das gleiche Problem, ich habe es mit css transform drehen behoben.

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

Es funktioniert gut in großen Browsern. 

21
Beskow

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

will-change: opacity;

In meinem speziellen Fall wurde dadurch ein ähnliches Problem mit dem Pixelsprung vermieden, das translateZ(0) in Internet Explorer eingeführt hat, obwohl in Chrome einige Probleme behoben wurden.

Die meisten anderen hier vorgeschlagenen Lösungen, die Transformationen beinhalten (z. B. translateZ(0), rotate(0), translate3d(0px,0px,0px) usw.), funktionieren, indem das Bemalen des Elements an die GPU übergeben wird, um ein effizienteres Rendern zu ermöglichen. will-change liefert einen Hinweis an den Browser, der vermutlich einen ähnlichen Effekt hat (der Browser kann den Übergang effizienter darstellen), fühlt sich jedoch weniger abgehackt (da er das Problem explizit anspricht, anstatt den Browser zur Verwendung der GPU zu bewegen). 

Allerdings ist zu beachten, dass die Unterstützung von browser für will-change nicht so gut ist (wenn das Problem jedoch nur bei Chrome liegt, kann dies eine gute Sache sein!). In einigen Situationen kann es eigene Probleme , aber es ist auch eine andere mögliche Lösung für dieses Problem.

14
Nick F

Ich hatte ein ähnliches Problem mit (nicht deckenden) Filtern beim Schweben. Festgelegt durch Hinzufügen einer Regel zur Basisklasse mit:

filter: brightness(1.01);
10
Juan Casares

Ich musste die Regeln backface-visibility und transform anwenden, um diese Störung zu verhindern.

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

In Safari 8.0.2 ist ein ähnliches Problem aufgetreten, bei dem Bilder mit dem Übergang der Deckkraft in Unruhe geraten. Keiner der hier veröffentlichten Korrekturen funktionierte, jedoch Folgendes:

-webkit-transform: translateZ(0);

Alles Gute an diese Antwort über diese nachfolgende Antwort

5
James Fletcher

backface-Visibility (oder -webkit-Backface-Visibility) 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
}
5
andersra

Ich hatte Probleme mit allen anderen Lösungen, da hier Änderungen am CSS erforderlich sind, die andere Dinge beschädigen könnten - position: relative erfordert, dass ich die Positionierung meiner Elemente vollständig umdenke: transform: rotate (0) kann bestehende Elemente stören wandelt um und gibt wackelige kleine Übergangseffekte, wenn ich eine Übergangsdauer eingestellt habe, und die Hintergrundsichtbarkeit funktioniert nicht, wenn ich jemals eine Rückseite benötige (und eine ganze Menge Präfix erfordert.)

Die faulste Lösung, die ich gefunden habe, ist, nur eine Deckkraft für mein Element festzulegen, die sehr nahe an 1 liegt, aber nicht ganz 1. Dies ist nur ein Problem, wenn Deckkraft 1 ist, also wird es keinen meiner anderen Stile zerstören oder beeinträchtigen:

opacity:0.99999999;
2

Ich stieß auf dieses Problem mit Bildern in einem Raster, wobei jedes Bild in einer Anzeige verschachtelt war: Inline-Block deklariert. Die Lösung, die Jamland oben zur Verfügung gestellt hat, funktionierte, um das Problem zu beheben, wenn die Anzeige: Inline-Block; wurde auf dem übergeordneten Element deklariert. 

Ich hatte ein anderes Raster, in dem sich die Bilder in einer ungeordneten Liste befanden, und ich konnte gerade die Anzeige deklarieren: block; und eine Breite für das übergeordnete Listenelement und für die Sichtbarkeit der hinteren Fläche: ausgeblendet auf dem Bildelement und es scheint keine Positionsverschiebung beim Schweben zu geben.

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

Die Lösung alpipego wurde mir in diesem Problem bedient Verwenden Sie -webkit-backface-visibility: hidden; Mit diesem Bild bewegen sich keine Bewegungen im Hover-Opazitätsübergang

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

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

In meinem Fall habe ich responsive width Bilder, die in einem max-width div enthalten sind. Sobald die Breite der Site diese maximale Breite überschreitet, werden die Bilder im Hover verschoben (mithilfe der CSS-Transformation).

In meinem Fall war es das Problem, in diesem Fall einfach die maximale Breite in ein Vielfaches von drei, drei Spalten zu ändern, und es wurde perfekt korrigiert.

1
sidonaldson

Ich habe festgestellt, dass in Ihrem CSS Deckkraft enthalten war. Ich hatte genau das gleiche Problem mit Chrome (das Bild wurde auf Hover verschoben). Alles, was ich tat, war, die Deckkraft zu deaktivieren, und es wurde gelöst, es wurden keine Bilder mehr bewegt.

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

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

0
Beached As