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

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

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

Вопрос: может кто подсказать пути решения данной проблемы? Аналоги решений вроде: перенести все SVG в шрифт и использовать text-shadow не особо подходит. Хотелось бы найти решение путем оптимизация самого процесса рендера, если такое возможно. Может кто-то накидать статей или показать примеры?
  • Вопрос задан
  • 105 просмотров
Пригласить эксперта
Ответы на вопрос 1
@romant094
Я бы рекомендовал заменить на box-shadow на мобилках, потому что просадка по перфомансу будет сильная, если браузер не поддерживает это.

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

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

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

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