Почему не работает svg фильтр в safari?

Question

[Павел Антонов]

Есть анимация с использованием svg фильтра. Демо здесь. Во время движения шариков они слипаются в один прямоугольник, причем слипаются в прямом смысле, в этом суть анимаци. В хроме и лисе работает прекрасно, в сафари нет, шарики просто двигаются и становятся на нужное место. это будет хорошо видно если удалить эти строки:

.blobs{
  -webkit-filter: url("#goo");
  filter: url("#goo");
}

Тогда в хроме и лисе анимация без эфекта слипания, вот так она выглядит в сафари.

Я не могу ничего внятного нагуглить по этому вопросу, везде пишут что сафарь поддерживает svg фильтры, вопрос к знающим, может дело в синтаксисе? Может что не так в css описал. Был момент в firefox не хотело работать пока я не указал абсолютный путь до фильтра в итоге запись сейчас такая

-webkit-filter: url("#goo");
filter: url("/individualnye-resheniya.html#goo");

Первая строка работает в хроме вторая для фаерфокса. Что Сафари не нравится не пойму..

Answer 1

[Олег]

Вот поддержка свойств браузерами caniuse.com/#search=filter
Как видно, safari с 10 версии поддерживает filter

Comments

[Павел Антонов]

да filter он поддерживает только те которые стандартные типа blur, grayscale, hue и тд.. а я пытаюсь через свойство filter передать ему свой svg фильтр. хром это кушает а сафарь нет. вот я и говорю почитал понял что сафарь именно не умеет применять нестандартные фильтры к DOM элементам страницы, их можно применять только к SVG элементам. я так понял