Почему css filter (drop-shadow) не работает в safari?

Question

[vahromeevilya-widestudio]

Добрый день, столкнулся с проблемой в safari. Есть SVG элемент вставленный напрямую в страницу. К нему необходимо применить filter: drop-shadow В chrome и других браузерах работает как надо, но не в Safari.

Safari 13.1.2

Демка https://codepen.io/vahromeevilya-widestudio/pen/mdXaXqK

Что должно быть :



Что в Safari:



Есть какие идеи?

Comments

[Антон Литвиненко]

забить на сафари, всем мил не будешь

[vahromeevilya-widestudio]

Антон Литвиненко, Да я бы рад, но заказчику надо =D

[Антон Литвиненко]

vahromeevilya-widestudio, сделать это сразу в свг

[vahromeevilya-widestudio]

Антон Литвиненко, Я наоборот убрал все фильтры из svg в css, чтобы потом анимировать удобнее было) Мне бы просто какой нибудь фикс простой по типу webkit filter , который почему то очень странно не работает

[imko]

Антон Литвиненко,

забить на сафари

поддерживаю, купил айфон - получи айфон, такой инвалидный каким его и задумали

Answer 1

[Vladislav]

Раз ты стили свг прописываешь через css, то можно попробовать костыльно сделать так: попроси дизайнера сделать такую же свг только обводка с тенью, сам цвет облака не нужен, только голубая тень и просто наложи свг на свг и подровняй через position top let, в общем идею думаю понял, попробуй
И вообще filter: drop-shadow должен работать https://caniuse.com/?search=filter%3A%20drop-shadow%20

Comments

[vahromeevilya-widestudio]

Я скинул лишь часть svg , на самом деле там элементов раз в 20 больше, будет слишком накладно по производительности) Плюс я и сам могу в фигме тень сделать, скачать. Но это слишком будет нагружать верстку. НО да как костыль вполне вариант рабочий

Answer 2

[Павел Поляков]

Наткнулся на англоязычный комментарий где рекомендуют обернуть svg например в div, и уже этому div прописать drop-shadow