Mobile Safari filtr skali szarości dodaje rozmycie

mam desaturacji obrazy z tych filtrów:Mobile Safari filtr skali szarości dodaje rozmycie

img { 
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); 
    filter: gray; 
    -webkit-filter: grayscale(1); 
}

Działa ładnie, choć wydaje się pixellate filtr obrazów na Mobile Safari. Nie wiem, dlaczego tak jest. Czy istnieje tajna metoda zachowania jasności? Czy muszę żyć z tym niedociągnięciem przeglądarki? Jako przykład, oto czym zestawione screeny, informacje zebrane z iOS Simulator:

With grayscale filter

Without filter

Źródło

2012-12-13 Jezen Thomas

To nie jest odpowiedź, ale być może wskazówka: filtr jest wyraźnie stosowane do non -retina wersje obrazów, prawdopodobnie ze względu na kompatybilność (np. gdyby to było rozmycie Gaussa, wtedy byłaby różnica w promieniu rozmycia i wydaje mi się, że nie ma wystarczającej logiki, aby je rozróżnić). Być może warto zagłębić się w tę linię myślenia - prawdopodobnie istnieje własność własnościowa, którą można określić. – Tommy

Czy masz na myśli wybór mniejszego obrazu źródłowego w celu uzyskania zgodności? Są to obrazy śródliniowe. Źródło każdego obrazu jest takie samo na obu zrzutach ekranu. Obrazy mają pierwotnie rozmiar około 300 pikseli i są zmniejszane, aby pasowały do siatki. Siatka zmienia rozmiar, aby pasowała do widoku. –

Myślę, że dziedzicząc niektóre zachowania ze starszych urządzeń, Safari utrzymuje fikcję, że cztery z jej rzeczywistych pikseli to 1px w kategoriach CSS. Spekuluję więc, że kiedy zastosuje się filtr, domyślnie stosuje się to, że każdy piksel wejściowy jest tym, czym jest udawany gdzie indziej, 1px, ponieważ niektóre filtry są oparte na tym założeniu. Mamy nadzieję, że istnieje flaga, która może zmienić to zachowanie, biorąc pod uwagę, że twój filtr oczywiście nie dba o to, ile rzeczywistych pikseli zawiera się w 1px. – Tommy

Trochę zbyt późno, ale to powinno wystarczyć:

-webkit-transform: translateZ(0);

źródło: http://matthewhappen.com/fixing-css3-filter-blur-on-retina-displays/

Źródło

2013-07-10 22:14:55 Luccas

Dzięki za odpowiedź! –

Nie wiem, czy mobile safari jest podniesienie styl filtra lub -webkit filtr.

Nie wierzę, że filtry -webkit pozwalają na określenie rozdzielczości filtru, więc jeśli chcesz przełączyć to domyślne zachowanie, musisz dodać filterRes = 400 do definicji filtru lub alternatywa jest gotowa wstawić svg i określić jawny filterRes dla twojego filtra.

<svg> 
    <defs> 
    <filter id="greyscale" filterRes="1278"> 
     <feColorMatrix etc...> 
    </filter> 
    </defs> 

Images... 

</svg>

Źródło

2012-12-13 21:09:35

Mobile Safari filtr skali szarości dodaje rozmycie

Odpowiedz

Powiązane problemy