[help] Handling z-index of NUI iframe

FiveM Resource Development Discussion
, ,
1

Hello everyone,

I have been working on the UI of a resource and I noticed some people releasing resources using backdrop-filter: blur;
Every front-end developer has tried using the backdrop filter blur in FiveM and they have ended up with some black corners / black rectangle and the blur not working even though the css rule is not grayed out in the devtools upon inspection i.e. the rule is supported by CEF.
Since the CEF is not aware of the gameview behind it, it cannot find anything to render the backdrop filter blur on, you get that (probably fallback) black square.
I tried 2D DUI on-screen and I’ve got the same result.
So after some research I found that I can use a WebGL shader and voila - it worked, I have the backdrop-filter blur working.

Since I don’t have any prior experience developing UI for FIveM I will need some help.
The shader is rendered in a canvas and even though I am setting a negative z-index to that canvas it still hides the rest of the UI.
The CEF assigns an automatically incrementing z-index to each iframe (UI resource) by the order it is loaded starting from 0. My resource was loaded last so when I set the z-index of it’s iframe to negative the other UI showed up.
Using SetNuiFocus sets a z-index of 99999 of the current resource iframe meaning that every other UI will be hidden (chat, hud, etc) and I am not sure how to fix this issue.

2

In addition the shader canvas takes the screen size and covers the entire screen not small areas.
The only solution I have in mind is rendering small canvases for each element/component that will use the backdrop filter blur but it sounds wrong.

Edit: backdrop-filter blur works if you have some background to render it over. In my case I was trying to directly use it without any background (something like a HUD).

3
1 Like