How to solve filter:drop-shadow rendering problem in React?

Question

React

I'm currently developing a Next.js application that mostly has filter: drop-shadow - it helps me create a neon glow for SVG elements.

Problem : as I understand it, on mobile devices, browsers do not have enough power to render all elements with this style, and at the end of the load I get a simple crash of the site.

Question : Can anyone suggest a solution to this problem? Analogous solutions like: transfer all SVG to a font and use text-shadow is not very suitable. I would like to find a solution by optimizing the rendering process itself, if possible. Can someone post articles or show examples?

Answer 1

I would recommend replacing it with box-shadow on mobile because the performance drawdown will be severe if the browser doesn't support it.
Here it is described when it is better to use what.
https://css-tricks.com/breaking-css-box-shadow-vs-...
UPD see which browsers you need to support and decide whether to use it or not.
https://caniuse.com/?search=drop-shadow