Niedawno natknąłem się na dziwne zachowanie w przeglądarkach Webkit (przynajmniej pod OSX), które rozwiązało się znacznie dłużej niż bym chciał!

Zasadniczo: ustawieniefilter: blur(0) (lub specyficzne dla dostawcy-webkit-filter) na elemencie powinien oznaczać, że do elementu nie jest stosowana żadna forma rozmycia.

Jednak Webkit nadal zaciera element, gdy którykolwiekblur(0) lub zerowanie przy określonej jednostce (tj .:blur(0px)) jest do niego przypisany.

Zrzuciłem tu szybkie Fiddle, aby zademonstrować:http://jsfiddle.net/f9rBE/

To pokazuje trzy identyczne div zawierające tekst (bez niestandardowych czcionek):

<div class="no-blur">
    <p><strong>This has absolutely nothing assigned</strong></p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam facilisis orci in quam venenatis, in tempus ipsum sagittis. Suspendisse potenti. Donec ullamcorper lacus vel odio accumsan, vel aliquam libero tempor. Praesent nec libero venenatis, ultrices arcu non, luctus quam. Morbi scelerisque sit amet turpis sit amet tincidunt. Praesent semper erat non purus pretium consequat. Aenean et iaculis turpis. Curabitur diam tellus, consectetur non massa et, commodo venenatis metus.</p>
</div>

Nie ma przypisanego stylu, podczas gdy dwa pozostałe mająblur(0) iblur(0px):

.no-blur{}
.zero-px-blur{
    -webkit-filter: blur(0px);
    -moz-filter: blur(0px);
    -o-filter: blur(0px);
    -ms-filter: blur(0px);
    filter: blur(0px);
}

.zero-blur{
    -webkit-filter: blur(0);
    -moz-filter: blur(0);
    -o-filter: blur(0);
    -ms-filter: blur(0);
    filter: blur(0);
}

Jeśli spojrzysz na Safari lub Chrome, dolne dwa są zamazane:

Kilka rzeczy wartych odnotowania:

To niezamierzone rozmycie występuje również w Safari na urządzeniach z systemem iOS7 (zarówno iPhone'ach, jak i iPadach);Występuje również w Chrome i Safari pod OSX;Wydaje się, że nie występuje w Chrome i Safari na sprzęcie Apple innym niż Retina;Nie dzieje się to w FireFox w OSX.

Oczywiście,filter: blur nie jest jeszcze obsługiwany w Firefoksie, więc trudno stwierdzić, czy zachowanie, które widzę, jest zamierzonym / oczekiwanym zachowaniem, czy też jest to błąd w Webkit?

W końcu doszedłem do wniosku, że używanieblur(none) zamiast tego miał pożądany efekt (tj. usunął wszystkie efekty rozmycia), ale jestem zdezorientowany, dlaczego używanie zera nie ma takiego samego efektu, biorąc pod uwagę, że w innych przykładach filtrów (np .:filter: grayscale) można zresetować po prostu używając zero zamiast słowa kluczowego none.

Dlaczego to?