Ich habe einige CSS, bei denen beim Schweben ein CSS-Übergangseffekt ein Div bewegt.
Das Problem ist, wie Sie im Beispiel sehen können, dass der translate
Übergang den schrecklichen Nebeneffekt hat, dass sich das Bild im Div um 1 Pixel nach unten / rechts bewegt (und möglicherweise die Größe geringfügig ändert?), So dass es fehl am Platz erscheint und unscharf...
Der Fehler scheint die ganze Zeit über zu wirken, wenn der Hover-Effekt angewendet wird, und aus einem Prozess von Versuch und Irrtum kann ich mit Sicherheit sagen, dass er nur dann auftritt, wenn der Übersetzungsübergang das Div verschiebt (Kastenschatten und Deckkraft werden ebenfalls angewendet, machen aber keinen Unterschied zu der Fehler beim Entfernen).
Das Problem scheint nur aufzutreten, wenn die Seite Bildlaufleisten enthält. Das Beispiel mit nur einer Instanz des Div ist in Ordnung, aber sobald wieder identische Divs hinzugefügt werden und die Seite daher eine Bildlaufleiste erfordert, tritt das Problem erneut auf ...
Antworten:
Update 2020
image-rendering
CSS-Eigenschaft.<img>
mithilfe der objektangepassten CSS-Eigenschaft durch ein Tag ersetzen .Ursprüngliche Antwort
Versuchen Sie dies in Ihrem CSS :
Dies bewirkt, dass sich die Division "mehr 2D" verhält.
backface-visibility
undtransform
ohne-webkit-
Präfix. Ich weiß derzeit nicht, wie sich dies auf das Rendern anderer Browser (FF, IE) auswirkt. Verwenden Sie daher die Versionen ohne Präfix mit Vorsicht.quelle
-webkit-transform
, kann ich keine Änderung wirklich sehen und wenn ich die Chromes-Entwicklerkonsole öffne. Ich sehe, dass diese 2 CSS-Eigenschaften durchgestrichen werden, als ob sie überschrieben würden, aber sie sind es nicht (leeres CSS und HTML). Es ist, als würde Chrom sie nicht mehr akzeptieren.Sie müssen eine 3D-Transformation auf das Element anwenden, damit es eine eigene zusammengesetzte Ebene erhält. Zum Beispiel:
oder
Weitere Informationen zu Layer-Erstellungskriterien finden Sie hier: Beschleunigtes Rendern in Chrome
Eine Erklärung:
Beispiele (Hover Green Box):
Wenn Sie einen Übergang für Ihr Element verwenden, berechnet der Browser die Stile neu. Layouten Sie dann Ihren Inhalt neu, auch wenn die Übergangseigenschaft visuell ist (in meinen Beispielen ist es eine Deckkraft), und malen Sie schließlich ein Element:
Hier geht es um ein neues Layout des Inhalts, das dazu führen kann, dass während des Übergangs Elemente auf der Seite "tanzen" oder "blinken". Wenn Sie zu den Einstellungen gehen, das Kontrollkästchen "Zusammengesetzte Ebenen anzeigen" aktivieren und dann eine 3D-Transformation auf ein Element anwenden, sehen Sie, dass es eine eigene Ebene erhält, die mit einem orangefarbenen Rand umrandet ist.
Nachdem das Element eine eigene Ebene erhalten hat, muss der Browser beim Übergang nur noch Ebenen zusammensetzen, ohne sie neu zu gestalten oder zu malen. Daher muss das Problem gelöst werden:
quelle
translateZ: 0.000001
(ein infinitesimales #) und voila anzuwenden! Wieder scharfe Hintergrundbilder!Hatte das gleiche Problem mit eingebettetem YouTube-Iframe (Übersetzungen wurden zum Zentrieren des Iframe-Elements verwendet). Keine der oben genannten Lösungen funktionierte, bis versucht wurde, CSS-Filter zurückzusetzen und Magie auftrat.
Struktur:
Stil [vorher]
Stil [nach]
quelle
filter: blur(0)
habe es für mich getan!-webkit-
Präfix nicht vorher kommen? WeitereIch habe ein experimentelles neues Attribut CSS empfohlen, das ich mit dem neuesten Browser getestet habe, und es ist gut:
Damit kennt der Browser den Algorithmus zum Rendern
quelle
image-rendering: -webkit-optimize-contrast;
das Problem in Chrome. Bilder in anderen Browsern, z. B. Firefox, werden jedoch mit der festgelegten Renderoption viel, viel schlechter gerendert. Daher verwende ich nur die WebKit-Direktive, die auch auf der Blink-Engine funktioniert. Vielen Dank!Ich habe gerade einen anderen Grund gefunden, warum ein Element bei der Transformation verschwimmt. Ich habe
transform: translate3d(-5.5px, -18px, 0);
ein Element neu positioniert, nachdem es geladen wurde, aber dieses Element wurde 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 von der ganzen Zahl entfernt war, desto schlimmer wurde die Unschärfe.
dh
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.
quelle
Ich habe das Problem mit dem schrittweisen Übergang betrogen, nicht reibungslos
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/
quelle
zoom
Für mich hat es funktioniert, auf das Doppelte zu skalieren und es auf die Hälfte zu reduzieren.quelle
Ich habe ungefähr 10 mögliche Lösungen ausprobiert. Verwechselt sie und sie funktionierten immer noch nicht richtig. Am Ende gab es immer 1px Shake.
Ich finde eine Lösung, indem ich die Übergangszeit am Filter reduziere.
Das hat nicht funktioniert:
Lösung:
Versuchen Sie dies in Geige:
Ich hoffe das hilft jemandem.
quelle
Versuchen
filter: blur(0);
Es hat bei mir funktioniert
quelle
Für mich jetzt im Jahr 2018. Das einzige, was mein Problem behoben hat (eine weiße Glitchy-Flicker-Linie, die beim Schweben durch ein Bild verläuft), war, dies auf mein Link-Element anzuwenden, das das Bildelement enthält, das es hat
transform: scale(1.05)
quelle
Mir wurde geholfen, indem ich den Wert der Übergangsdauer
.3s
gleich den Übergangszeitschritten einstellte.3s
quelle
Habe gerade das gleiche Problem. Versuchen Sie, die Position festzulegen: relativ zum übergeordneten Element, das bei mir funktioniert hat.
quelle