Недавно я обнаружил странное поведение в браузерах Webkit (по крайней мере, под OSX), решение которого заняло гораздо больше времени, чем хотелось бы!

По сути: настройкаfilter: blur(0) (или зависит от поставщика-webkit-filter) на элементе означает, что к элементу не применяется размытие.

Однако Webkit все еще размывает элемент, когда либоblur(0) или обнуление с указанной единицей (то есть:blur(0px)) назначен на него.

Я собрал короткую скрипку, чтобы продемонстрировать:http://jsfiddle.net/f9rBE/

Это показывает три одинаковых div, содержащих текст (без пользовательских шрифтов):

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

У одного нет никакого назначенного стиля, в то время как у двух другихblur(0) а такжеblur(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);
}

Если вы посмотрите в Safari или Chrome, нижние два размыты:

Несколько вещей, на которые стоит обратить внимание:

Это непреднамеренное размытие также происходит в Safari на устройствах iOS7 (как iPhone, так и iPad);Это также происходит в Chrome и Safari под OSX;Похоже, что это не происходит в Chrome и Safari на оборудовании Apple без сетчатки;Это не происходит под FireFox в OSX.

Конечно,filter: blur пока не поддерживается вообще в Firefox, поэтому трудно сказать, является ли поведение, которое я вижу, преднамеренным / ожидаемым, или это ошибка в Webkit?

В конце концов я пришел к выводу, что с помощьюblur(none) вместо этого имел желаемый эффект (то есть: удалил все эффекты размытия), но я запутался, почему использование нуля не имеет такого эффекта, учитывая, что в других примерах фильтра (например:filter: grayscale) можно сбросить просто используя ноль, а не ключевое слово none.

Почему это?