Filtr CSS na ekranie Retina: rozmyte obrazy

Po zastosowaniu filtru -ebkit i przejścia -webkit do obrazu i zmianie filtru po najechaniu wskaźnikiem przesuwania obrazu działa dobrze, ale obraz staje się naprawdę niewyraźny.Filtr CSS na ekranie Retina: rozmyte obrazy

Uwaga: Dzieje się tak tylko na siatkówka Displays - w ogóle z „normalnych” PPI-monitorów, ale na przykład rozmyty na nowego MacBooka Pro z wyświetlaczem Retina ma problemu.

Moje CSS (bez przedrostków dla dostawcy):

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

Uwaga: aby zobaczyć efekt/błąd, mam ustawić przejściowy okres do 2 sekund

Sprawdź moje Demo: http://jsfiddle.net/dya2t/7/

Jak mogę to naprawić?

EDYCJA: Jeśli ustawię stan: hover do filtrowania: none is sharp! :-) Ale oczywiście przejście już nie działa: -/ Gdy tylko pojawi się filtr na obrazie (nawet jeśli wartość wynosi 0 lub 0%), obraz staje się niewyraźny na ekranach siatkówki (z przejściami lub bez nich ... jest po prostu rozmazany, przez cały czas). Domyślam się, że to jest Filter-Bug.

Jest to znany błąd w WebKit https://bugs.webkit.org/show_bug.cgi?id=93471

Źródło

2012-11-12 albuvee

można filtry łańcuchu: 'filter: skala szarości (0,5) rozmycie (1px) nasycić (2);' itd ..: http://jsfiddle.net/meo/dya2t/9/ ale nie wiem, czy to naprawi twój problem, nie mam ekranu siatkówki – meo

@meo: filtry łańcuchowe niestety nie pomagają, thx i tak – albuvee

W twoim filmie filtr nasycenia po prostu przesłania obraz w skali szarości. Powinieneś pozbyć się nasycenia. To nie rozwiąże problemu z ostrością, ale przynajmniej twój filtr zadziała :) – robertp

udało mi się obejść ten problem poprzez zastosowanie do znacznika IMG:

-webkit-transform: translateZ(0);

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

Źródło

2013-01-28 13:27:11

Potwierdzam, że to obejście działa idealnie. Wierzę, że to jest poprawna odpowiedź, ponieważ pytanie brzmiało "jak to naprawić", a nie "jaki jest tutaj problem" :) – mezis

Jak to się stało? To jest niesamowite. – ns1

elementy podrzędne z -webkit -widok-widoczność: ukryty; rozwiąże to.

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

Źródło

2013-09-13 15:04:13 Chris

Ten zrobił mi lewę, gdzie '' '-webkit-transform: translateZ (0)' '' nie, dzięki! – thomasstephn

'-webkit-transform' pracował dla mnie, ale przyciął krawędź obrazu; to również działało, ale bez przycinania. Dzięki! –

Dołączył stackoverflow niech inni wiedzą, ponieważ musiałem znaleźć sobie na to uwagę: Ten błąd również manifesty (ale inaczej) podczas próby drukowania obrazów w Chrome. Zmieniają one w superpiksele!

Jeśli wyrzucisz plik -webkit-filter na obraz w formacie PNG w kolorze chrom, niezależnie od ustawień drukarki lub drukowania, wydrukuje on obraz/y we właściwym rozmiarze, ale zostanie zmniejszony do mniej niż 70 dpi. Jest to również widoczne w podglądzie wydruku. Naprawiono to:

-webkit-transform: translateZ(0);.

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

Źródło

2016-02-18 18:54:12 Thomassinaaaaaaa

Filtr CSS na ekranie Retina: rozmyte obrazy

Odpowiedz

Powiązane problemy