Blur & Flicker Ausgabe auf CSS transform

Ich habe hier einige Fragen mit Lösungen gefunden, aber keine scheint für mich zu funktionieren. Nach dem Hochskalieren ist der Text verschwommen und flackert dann in Position. Etwas stimmt nicht mit dem Rendering.Blur & Flicker Ausgabe auf CSS transform

Ich habe eine Fiedel mit der genauen Struktur, die ich versuche zu verwenden, wenn jemand eine Lösung dafür hat, würde ich es begrüßen.

Ich möchte unterstreichen, dass ich die Lösungen, die ich hier gefunden habe, ausprobiert habe, aber keiner half, oder ich konnte sie nicht wie beabsichtigt implementieren.

FIDDLE:https://jsfiddle.net/1yu9p66L/1/

.box1:hover { 
    -moz-backface-visibility: hidden; 
    -moz-transform: translateZ(0) scale(1.0, 1.0); 
    -moz-transition: all 200ms ease-in; 
    -moz-transform: scale(1.09); 
    -moz-perspective: 1000; 
    -moz-backface-visibility: hidden; 
}

PS: Derzeit auf 45.0.1 FF testen.

Quelle

2016-03-26 Andrei P

Fügen Sie die Transformation in die Originalbox ein, die sie auf < 1 skaliert, und ändern Sie dann die Transformation im Schwebezustand in 1. Sie müssen die Größe der Box anpassen.

Dies zu .box1, zum Beispiel:

-webkit-transform: scale(.9); 
-ms-transform: scale(.9); 
-moz-transform: scale(.9); 
transform: scale(.9);

und dies .box1: schweben

-webkit-transform: scale(1); 
-ms-transform: scale(1); 
-moz-transform: scale(1); 
transform: scale(1);

https://jsfiddle.net/1yu9p66L/2/

Quelle

2016-03-26 23:51:25

Danke. Auf den ersten Blick scheint es zu funktionieren, aber es kehrt nur das flackernde Problem um, wenn die Box skaliert. Ich muss zugeben, es ist nicht mehr so nervig, weil es unscharf ist, aber wenn Sie drei dieser Boxen auf der Live-Website haben und Sie, zufällig oder nicht, auf alle von ihnen in einer Mausbewegung schweben, die unerwünschter Effekt fällt wirklich auf. –

@AndreiP Ich bin nicht genau sicher, was Sie mit Flackern meinen, aber ich denke, vielleicht liegt es an der Änderung der Hintergrundfarbe. –

Am Ende der Animation ist die Box verschwommen, dann schärft sie sich und scheint sich um 1 Pixel nach oben und unten zu bewegen, bis sie in ihrer endgültigen Position einrastet. Ich habe ein wenig recherchiert und gesehen, dass Leute die gleichen Probleme haben, andere geben Lösungen, die in diesem Fall nicht funktionieren. Ich dachte auch, dass es auch etwas in der div sein könnte und entfernte Effekte und Elemente, aber das Problem blieb bestehen. –

Blur & Flicker Ausgabe auf CSS transform

Antwort

Verwandte Themen