Update FiveM Chrome version

[Firou91]

Hi there,

Is it possible to improve the Chrome version on FiveM, so that the entire development community can use the native CSS properties added since?

I've only got one example of an unusable property (which is the one I mainly want to use for my server UIs), but if anyone else finds others, please feel free to add it:

backdrop-filter: blur(30px);

Edit:
impossible to create a drag and drop system, either in css or js

[Z3rio]

You can blur the background, you cant blur the actual game though. As that doesnt exist in the context of an NUI.
Blurring of an ui is not really a new property.

It is too, possible to create a drag and drop system. Both via built in html cursor: drag (Something like that)
You can also, ofcourse, do it manually via JS

[Firou91]

Thank you for your interest in my issue! Drag-and-drop is a thought that a developer friend shared with me. I thought it was strange not to be able to do it, but yes, it can be done.

[gtasnail]

You can use some "hacky" methods to use backdrop-filters such as https://github.com/gtasnail/fivem-glsl/ or by using the pepper plugin for x-cfx-game-view object types that captures the game render (just pop this behind any element that uses backdrop-filters)

(obviously this has it's drawbacks such as performance issues but the x-cfx-game-view object seems to be the best way to do this though at this moment in time)

const container = document.createElement('div');
container.style.cssText = 'position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); display:flex; gap:20px;'; // just div it

const leftScreen = document.createElement('object');
leftScreen.type = 'application/x-cfx-game-view';
leftScreen.style.width = Math.floor(window.innerWidth / 3)
leftScreen.style.height = Math.floor(window.innerHeight / 3)

const rightScreen = document.createElement('object');
rightScreen.type = 'application/x-cfx-game-view';
rightScreen.style.width = Math.floor(window.innerWidth / 3)
rightScreen.style.height = Math.floor(window.innerHeight / 3)

container.appendChild(leftScreen);
container.appendChild(rightScreen);
document.body.appendChild(container);

window.addEventListener('resize', () => { // reeeesizeee
    const newWidth = Math.floor(window.innerWidth / 3);
    const newHeight = Math.floor(window.innerHeight / 3);
    leftScreen.style.width = rightScreen.style.width = `${newWidth}px`;
    leftScreen.style.height = rightScreen.style.height = `${newHeight}px`;
});

[Firou91]

Thank you for your reply, I'll take into account the possibilities of getting around this problem ^^
I still wonder if there will ever be an update that will fix everything. I think it's a shame not to be able to exploit the full potential of vanilla languages.

[Z3rio]

Thank you for your reply, I'll take into account the possibilities of getting around this problem ^^ I still wonder if there will ever be an update that will fix everything. I think it's a shame not to be able to exploit the full potential of vanilla languages.

Please do understand though, blurring would not "be better" if chrome was updated.
I do believe chrome is fairly up-to-date in FiveM though.

The effect from backdrop-filter: blur(30px); would still be the same as filter: blur(30px;, just that it effects elements in a different way.
You would still not be able to blur the game / create actual good looking & correct blurs

As for dragging and dropping, that too, definitely works.