Почему в Mozill'е не работает transition: filter?

Question

[ASultonov]

Сейчас в интернете нашел кроссплатформенное решение для filter: grayscale. Все работает хорошо, все отлично. Но ровно до тех пор, пока не захочется добавить свойство transition: filter. Потому что это свойство в FF вообще не работает. Вот сам код:

.grayscale {
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: url(../svg/grayscale.svg#grayscale); /* Firefox 4+ */
  filter: gray; /* IE 6-9 */
  filter: grayscale(100%);

  -webkit-transition: -webkit-filter .5s, filter .5s;
  -moz-transition: -moz-filter .5s, filter .5s;
  -o-transition: -o-filter .5s, filter .5s;
  transition: -webkit-filter .5s, -moz-filter .5s, -ms-filter .5s, -o-filter .5s, filter .5s;
}

.grayscale:hover {
  -webkit-filter: grayscale(0);
  -moz-filter: grayscale(0);
  -ms-filter: grayscale(0);
  -o-filter: grayscale(0);
  filter: none;
}

Кажется это из-за svg. Кто-нибудь знает как решить проблему?

Answer 1

[Евгений Петров]

Для полностью оттенков серого

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

Для цветной версии:

-webkit-filter:grayscale(0);
filter:none;

Строки для -webkit-filter просто для ориентации. transition должен работать.

Comments

[ASultonov]

Ваш вариант от "моего" отличается только тем, что строка url у меня записана на отдельном файле.

[Евгений Петров]

Да, одно и тоже. Вощем бида... Нет в FF поддержки.

[ASultonov]

Жаль...

[Евгений Петров]

@ASultonov а вот кому немного извращений?))

[ASultonov]

Ого, работает ) Осталось только понять как это работает... Спасибо.