freislot
@freislot
Frontend-разработчик

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

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

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


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

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

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


Первая строка работает в хроме вторая для фаерфокса. Что Сафари не нравится не пойму..
  • Вопрос задан
  • 933 просмотра
Пригласить эксперта
Ответы на вопрос 1
politon
@politon
HTML5,CSS3,JS,PHP,SQL,API,canvas,animation...
Вот поддержка свойств браузерами caniuse.com/#search=filter
Как видно, safari с 10 версии поддерживает filter
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы