Как решить проблему рендера filter:drop-shadow в React?

Question

[melishev]

В данный момент я разрабатываю приложение на Next.js в котором по большей части присутствует filter: drop-shadow - он помогает мне создать неоновое свечение для SVG элементов.

Проблема: как я понял, на мобильных устройствах браузерам не хватает мощности для рендера всех элементов с этим стилем, и в конце загрузки я получаю простой вылет сайта.

Вопрос: может кто подсказать пути решения данной проблемы? Аналоги решений вроде: перенести все SVG в шрифт и использовать text-shadow не особо подходит. Хотелось бы найти решение путем оптимизация самого процесса рендера, если такое возможно. Может кто-то накидать статей или показать примеры?

Answer 1

[Антон Романков]

Я бы рекомендовал заменить на box-shadow на мобилках, потому что просадка по перфомансу будет сильная, если браузер не поддерживает это.

Вот тут описано, когда что лучше использовать.
https://css-tricks.com/breaking-css-box-shadow-vs-...

UPD смотрите, какие браузеры надо поддерживать и принимайте решение, использовать это или нет.
https://caniuse.com/?search=drop-shadow