CSS-Filter auf Retina-Display: Fuzzy-Bilder

Wenn Sie einen -webkit-Filter und ein -Webkit-Übergang auf ein Bild anwenden und den Filter bei Hover ändern, funktioniert der Bildübergang gut, aber dann wird das Bild wirklich unscharf.CSS-Filter auf Retina-Display: Fuzzy-Bilder

Hinweis: Dies geschieht nur auf Retina-Displays - kein Problem mit 'normalen' ppi-Displays, aber flockig auf beispielsweise einem neuen MacBook Pro mit Retina Display.

Meine CSS (ohne Anbieter-Präfixe):

img {filter:grayscale(1);filter:saturate(0%);transition:2s ease;width:200px;height:200px} 
img:hover {filter:grayscale(0)}

Hinweis: Um die Wirkung/Fehler zu sehen, habe ich die Übergangszeit auf 2 Sekunden eingestellt

überprüfen meine Demo aus: http://jsfiddle.net/dya2t/7/

Wie kann ich das beheben?

EDIT: Wenn ich den: Hover-State zu filtern: keine ist scharf! :-) ABER natürlich funktioniert der Übergang nicht mehr: -/ Sobald ein Bild gefiltert ist (auch wenn der Wert 0 oder 0% ist), wird das Bild unscharf auf Retina-Displays (mit oder ohne Übergänge) ... es ist einfach verschwommen, die ganze Zeit). Ich schätze das ist ein Filter-Bug.

Dies ist ein bekannter Fehler in WebKit https://bugs.webkit.org/show_bug.cgi?id=93471

Quelle

2012-11-12 albuvee

Sie können Kette Filter wie folgt: 'Filter: Graustufen (0,5) blur (1 Pixel) sättigen (2);' etc ..: http://jsfiddle.net/meo/dya2t/9/ aber ich weiß nicht, ob das dein Problem behebt ich habe kein Retina-Bildschirm – meo

@ Meo: Kettenfilter leider nicht helfen, thx trotzdem – albuvee

In Ihrer Fiddle überschreibt der Sättigungsfilter einfach die Graustufen. Sie sollten die Sättigung loswerden. Es wird das Schärfe-Problem nicht lösen, aber zumindest wird dein Filter funktionieren :) – robertp

ich, indem auf den img-Tag, um dieses Problem zu erhalten verwaltet:

-webkit-transform: translateZ(0);

http://jsfiddle.net/78qbn/3/

Quelle

2013-01-28 13:27:11

Ich kann bestätigen, dass diese Problemumgehung perfekt funktioniert. Ich glaube, das ist die richtige Antwort, denn die Frage war: "Wie kann ich das beheben", nicht "Was ist das Problem hier"? – mezis

Wie hast du das herausgefunden? Das ist fantastisch. – ns1

Geordnete Elemente mit -webkit -backface-visibility: versteckt; wird das beheben.

http://codepen.io/amboy00/pen/Bxbrd

Quelle

2013-09-13 15:04:13 Chris

Dieser hat den Trick für mich gemacht wo '' '-webkit-transform: translateZ (0)' '' nicht, danke! – thomasstephn

'-webkit-transform' arbeitete für mich, aber es schnitt den Rand des Bildes ab; Das klappte auch, aber ohne Clipping. Vielen Dank! –

Registriert Stackoverflow andere wissen zu lassen, da ich selbst dies herauszufinden hatte: diese Fehler auch Manifest (aber anders), wenn Bilder in Chrom zu drucken versuchen. Sie drehen sich um super pixelig!

Wenn Sie unabhängig von Drucker- oder Druckeinstellungen eine -webkit-filter auf ein PNG in Chrome werfen, wird das Bild/die Bilder in der richtigen Größe gedruckt, aber auf weniger als 70 dpi verkleinert. Es ist auch in der Druckvorschau sichtbar.

-webkit-transform: translateZ(0); behoben.

Meatspace Repro: prints of same stack of PNGs with & without fix

Quelle

2016-02-18 18:54:12 Thomassinaaaaaaa

CSS-Filter auf Retina-Display: Fuzzy-Bilder

Antwort

Verwandte Themen