Ich entwickle eine Website und die Demo kann gesehen werden here. Das Problem, dem ich gegenüberstehe, ist, wenn sich die Höhe des Logos beim Scrollen verringert und die meiste Zeit leicht verschwimmt. Das Gleiche passiert, wenn ich erneut nach oben scrolle und das Logo auf seine ursprüngliche Größe zurückstellt. Dies geschieht in Chrome und IE (Edge), funktioniert aber in Firefox gut.Bild verwischt auf CSS3 Höhe Übergang
Ich denke, es passiert wegen der CSS3-Übergänge, die angewendet werden. Wenn ich den Übergang entferne, skaliert es gut.
transition: all 0.3s ease-in-out;
transition-property: all;
transition-duration: 0.3s;
transition-timing-function: ease-in-out;
transition-delay: initial;
Die Eigenschaft, die der Übergang auf ist height angewendet wird.
Zunächst: height: 3.125rem; Nach blättern: height: 2.375rem;
Ich habe versucht, die folgende Zugabe gegeben here, aber es hat nicht funktioniert. Tatsächlich fügt das Hinzufügen des folgenden Bildes mein Bild leicht verschwommen hinzu, auch wenn es nicht gescrollt wird.
-webkit-backface-visibility: hidden;
-webkit-transform: translateZ(0) scale(1.0, 1.0);
Und auch:
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
Ist Ihnen bewusst, dass Ihr Logo mehr als zwei * tausend * Pixel breit ist? –
Die Größenänderung eines Rasterbildes führt zwangsläufig zu einer gewissen Unschärfe. Ziehen Sie stattdessen die Verwendung von Vektorgrafiken (SVG) in Betracht. –
Um zu verdeutlichen, ist der Grund, warum ich darauf hinweise, dass der Browser nur so viel tun kann, um ein Bild für Sie zu skalieren. Es ist kein Photoshop mit vier verschiedenen Downscaling-Methoden. Ihr gerastertes Bild wird wahrscheinlich viel schöner aussehen, wenn Sie eine skalierte Version neu laden, die näher an der endgültigen Größe von 150px ~ 200px liegt. Lassen Sie Photoshop oder andere Bildbearbeitungsprogramme die Skalierung anstelle von clientseitigen Browsern berechnen. Vektoren könnten auch eine gute Idee sein, wie Marat darauf hingewiesen hat. –