Фильтр CSS: размытие (0px) все еще размывает текст

Question

Я хочу стереть часть моего сайта, которая не стирается при нажатии на ссылку. Чтобы сделать это гладким, мне нужно применить размытие (0px) и получить переход на элемент. Проблема в том, что текст становится нерезким даже при размытии (0px).

.page.blurred {
  -webkit-filter: blur(10px);
  -moz-filter: blur(10px);
  filter: blur(10px);
}

.page {
  -webkit-filter: blur(0px);
  -moz-filter: blur(0px);
  filter: blur(0px);

  transition: all 1s ease;
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
}

Я переключаю класс с помощью jQuery. Есть предложения как с этим бороться?

Answer 1

Интересная тема. Одним из решений этой проблемы было бы установить filter собственность на initial, таким образом, сбросить фильтр полностью:

elem {
    -webkit-filter: initial;
    filter: initial;
}

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