it-swarm.com.de

CSS-Übergangseffekt macht das Bild verschwommen/bewegt das Bild um 1 Pixel, in Chrome?

Wenn das div über den Mauszeiger bewegt wird, verschiebt ein CSS-Übergangseffekt das div.

Wie Sie im Beispiel sehen können, besteht das Problem darin, dass der Übergang "Übersetzen" den schrecklichen Nebeneffekt hat, dass das Bild im Div um 1px nach unten/rechts bewegt wird (und möglicherweise die Größe geringfügig ändert?), So dass es aussieht von Ort und unscharf ...

Der Störimpuls scheint die ganze Zeit zu gelten, in der der Schwebeflug angewendet wird, und aus einem Versuch und Irrtum kann ich mit Sicherheit sagen, dass dies nur dann der Fall ist, wenn der Übersetzungsübergang das div verschiebt (Boxschatten und Deckkraft werden ebenfalls angewendet, machen aber keinen Unterschied der Fehler beim Entfernen).

2. EDIT: Eigentlich Problem nicht gelöst!

Bei der Erstellung einer JSFiddle zur Veranschaulichung des Problems bin ich auf eine interessante Beobachtung gestoßen. Das Problem tritt nur auf, wenn die Seite Bildlaufleisten enthält. Das Beispiel mit nur einer Instanz des div ist also in Ordnung, aber wenn noch einmal identische divs hinzugefügt werden und die Seite daher eine Bildlaufleiste erfordert, tritt das Problem erneut auf ...

Irgendwelche Ideen?!

132
Lewis

Haben Sie dies inCSSversucht?

.yourDivClass {
    /* ... */

    -webkit-backface-visibility: hidden;
    -webkit-transform: translateZ(0) scale(1.0, 1.0);
}

Was dies bewirkt, ist, dass sich die Division "mehr 2D" verhält.

  • Die Rückseite wird als Standard gezeichnet, um das Drehen von Gegenständen mit Und dergleichen zu ermöglichen. Dies ist nicht erforderlich, wenn Sie sich nur nach links, rechts, oben, unten, skalieren oder (im Gegenuhrzeigersinn) drehen.
  • Übersetzen Sie die Z-Achse, um immer einen Nullwert zu haben.

Bearbeiten

Chrome behandelt jetzt backface-visibility und transform ohne das Präfix -webkit-. Ich weiß derzeit nicht, wie sich dies auf das Rendern anderer Browser (FF, IE) auswirkt. Verwenden Sie daher die nicht vorgefassten Versionen mit Vorsicht.

232
sampoh

Sie müssen die 3D-Transformation auf das Element anwenden, damit es eine eigene zusammengesetzte Ebene erhält . Zum Beispiel:

.element{
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

oder

.element{
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}

Weitere Informationen zu Ebenenerstellungskriterien finden Sie hier: Beschleunigtes Rendering in Chrome


Eine Erklärung:

Beispiele (hover green box): 

Wenn Sie einen Übergang für Ihr Element verwenden, veranlasst der Browser die Neuberechnung der Stile und das Layout Ihres Inhalts, auch wenn die Übergangseigenschaft visuell ist (in meinen Beispielen ist dies eine Deckkraft).

screenshot

Das Problem ist hier ein neues Layout des Inhalts, der die Elemente auf der Seite "tanzen" oder "blinken lassen" kann, wenn der Übergang erfolgt. Wenn Sie zu den Einstellungen wechseln, aktivieren Sie das Kontrollkästchen "Zusammengesetzte Ebenen anzeigen" und dann Wenn Sie die 3D-Transformation auf ein Element anwenden, werden Sie feststellen, dass es eine eigene Ebene erhält, die mit einem orangefarbenen Rand markiert ist.

screenshot

Nachdem das Element eine eigene Ebene erhalten hat, muss der Browser die Ebenen beim Übergang nur zusammensetzen, ohne dass ein neues Layout oder gar Paint-Vorgänge erforderlich ist. Das Problem muss daher gelöst werden:

screenshot

85
sol0mka

Hatte dasselbe Problem mit eingebettetem Youtube-iframe (Übersetzungen wurden zum Zentrieren des iframe-Elements verwendet) Keine der oben genannten Lösungen funktionierte, bis versuchte reset-css-Filter und die Magie stattfand.

Struktur:

<div class="translate">
     <iframe/>
</div>

Stil [vorher]

.translate {
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
}

Stil [nach]

.translate {
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  filter: blur(0);
  -webkit-filter: blur(0);
}
37
xb1itz

Ich habe ein experimentelles neues Attribut CSS empfohlen, das ich mit dem neuesten Browser getestet habe. Es ist gut:

image-rendering: optimizeSpeed;             /*                     */
image-rendering: -moz-crisp-edges;          /* Firefox             */
image-rendering: -o-crisp-edges;            /* Opera               */
image-rendering: -webkit-optimize-contrast; /* Chrome (and Safari) */
image-rendering: optimize-contrast;         /* CSS3 Proposed       */
-ms-interpolation-mode: nearest-neighbor;   /* IE8+                */

Damit kennt der Browser den Algorithmus für das Rendern

30
Felipez

Ich habe gerade einen anderen Grund gefunden, warum ein Element beim Umwandeln verschwommen wird. Ich habe transform: translate3d(-5.5px, -18px, 0); verwendet, um ein Element neu zu positionieren, nachdem es geladen wurde. Dieses Element wurde jedoch verschwommen.

Ich habe alle oben genannten Vorschläge ausprobiert, aber es stellte sich heraus, dass ich einen Dezimalwert für einen der Übersetzungswerte verwendet habe. Ganze Zahlen verursachen keine Unschärfe, und je weiter ich mich von der ganzen Zahl entfernte, desto schlimmer wurde die Unschärfe.

das heißt, 5.5px verwischt das Element am meisten, 5.1px am wenigsten. 

Ich dachte nur, ich würde das hier schmeißen, falls es jemandem hilft.

4
ashrobbins

Ich habe das Problem Schritt für Schritt übergangen, nicht reibungslos

transition-timing-function: steps(10, end);

Es ist keine Lösung, es ist ein Betrug und kann nicht überall angewendet werden.

Ich kann es nicht erklären, aber es funktioniert für mich. Keine andere Antwort hilft mir (OSX, Chrome 63, Non-Retina-Display).

https://jsfiddle.net/tuzae6a9/6/

3
Evgeny Gendel

filter: blur(0); ausprobieren 

Es hat für mich funktioniert

1
Fred K

Das Skalieren auf das Doppelte und die Halbierung mit zoom hat für mich funktioniert.

transform: scale(2);
zoom: 0.5;
1
Kushagra Gour
filter: blur(0)
transition: filter .3s ease-out
transition-timing-function: steps(3, end) // add this string with steps equal duration

Es wurde mir geholfen, indem ich den Wert der Übergangsdauer .3s gleich Übergangsschritt .3s festlegte 

0
j-tap

Ich habe rund 10 mögliche Lösungen ausprobiert. Sie gemischt und sie funktionierten immer noch nicht richtig. Am Ende gab es immer 1px Shake.

Ich finde eine Lösung, indem ich die Übergangszeit beim Filter verringert.

Das hat nicht funktioniert:

.elem {
  filter: blur(0);
  transition: filter 1.2s ease;
}
.elem:hover {
  filter: blur(7px);
}

Lösung:

.elem {
  filter: blur(0);
  transition: filter .7s ease;
}
.elem:hover {
  filter: blur(7px);
}

Versuchen Sie dies in der Geige:

.blur {
  border: none;
  outline: none;
  width: 100px; height: 100px;
  background: #f0f;
  margin: 30px;
  -webkit-filter: blur(10px);
  transition: all .7s ease-out;
  /* transition: all .2s ease-out; */
}
.blur:hover {
  -webkit-filter: blur(0);
}

.blur2 {
  border: none;
  outline: none;
  width: 100px; height: 100px;
  background: tomato;
  margin: 30px;
  -webkit-filter: blur(10px);
  transition: all .2s ease-out;
}
.blur2:hover {
  -webkit-filter: blur(0);
}
<div class="blur"></div>

<div class="blur2"></div>

Ich hoffe das hilft jemandem.

0
Adam Orlov

Für mich jetzt im Jahr 2018. Das einzige Problem, das mein Problem (eine weiße glitchy-flackernde Linie, die durch ein Bild mit dem Schwebeflug verlaufen ist) behoben hat, war die Anwendung auf mein Linkelement, das das Bildelement mit transform: scale(1.05) enthält.

a {
   -webkit-backface-visibility: hidden;
   backface-visibility: hidden;
   -webkit-transform: translateZ(0) scale(1.0, 1.0);
   transform: translateZ(0) scale(1.0, 1.0);
   -webkit-filter: blur(0);
   filter: blur(0);
}
a > .imageElement {
   transition: transform 3s ease-in-out;
}
0
mateostabio