I have recently started working on UI in FiveM using ReactJS. As I have mentioned in a previous post I have noticed a few people using the backdrop-filter: blur which requires a workaround since the CEF is not aware of the gameview layer behind it and the filter just creates a black background (assuming it’s some sort of a fallback).
After reading all the threads I could find this was the only solution.
I fixed the errors typescript was complaining about and everything was working fine until I decided to alt-tab to make some changes. Then I noticed there were random black artifacts flickering on my screen and everyone else had the same issue.
I tried everything I came up with and nothing seemed to work (i.e. checking if the NUI is no longer focused).
I even though about using SVG with feGaussianBlur instead of that solution but it doesn’t really work the way I want it.
I have a few questions:
- Is it worth using this ‘shader’ to have the backdrop filter or is there a better solution ?
- Considering that there are people with lower-end system wouldn’t this solution impact their performance ?
- I have only ran the component full screen and haven’t tried rendering multiple instances covering only parts of screen that have the blur effect since I was worried about performance issues.