Recentemente, me deparei com um comportamento estranho em navegadores Webkit (pelo menos no OSX), o que levou muito mais tempo para resolver do que eu gostaria!

Essencialmente: configuraçãofilter: blur(0) (ou o específico do fornecedor-webkit-filter) em um elemento deve significar que nenhuma forma de desfoque é aplicada ao elemento.

No entanto, o Webkit ainda embaça o elemento quandoblur(0) ou zerar com uma unidade especificada (ou seja:blur(0px)) é atribuído a ele.

Eu juntei um violino rápido aqui para demonstrar:http://jsfiddle.net/f9rBE/

Isso mostra três divs idênticas contendo texto (sem fontes personalizadas):

<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>

Um não tem nenhum estilo atribuído a ele enquanto os outros dois têmblur(0) eblur(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);
}

Se você der uma olhada no Safari ou no Chrome, as duas últimas serão desfocadas:

Algumas coisas dignas de nota:

Esse desfoque não intencional também ocorre no Safari em dispositivos iOS7 (tanto iPhones quanto iPads);Também ocorre no Chrome e no Safari no OSX;Não parece ocorrer sob Chrome e Safari em hardware não retina da Apple;Isso não acontece em FireFox no OSX.

Claro,filter: blur Ainda não há suporte para o Firefox no momento, por isso é difícil dizer se o comportamento que estou vendo é um comportamento intencional / esperado ou se é um bug no Webkit?

Eu finalmente cheguei à conclusão de que usandoblur(none) em vez disso, teve o efeito desejado (ie: removeu todos os efeitos de blur), mas estou confuso sobre o porquê usar zero não tem o mesmo efeito dado em outros exemplos de filtro (por exemplo:filter: grayscale) pode ser redefinido simplesmente usando zero em vez da palavra-chave none.

Por que é isso?