Trouble with Adjusting Window Opacity

[cmcburnieucf]

Hello,

I am a new user of the Tauri framework and I am developing an application that whose window opacity can be toggled with a slider on the frontend. It is also supposed to be displaying over all other application windows at all times. My problem is that the window's opacity never changes or the window never stays on top of other windows after you click off of it, and I am not sure how to debug this. I attempted to look at what others have done but I did not see anything similar or useful in my search. I also have attempted to go on Overflow but that was not successful since I am not even able to post a question there. So, I believed this discussion area was my best bet. Any ideas on how I can adjust the window's opacity via frontend or backend? And also as to why the window never stays on top of other windows when you click off of it? Here is the code I have altered in case you need it:

tauri.conf.json:

App.tsx:

App.css:

[FabianLars]

Any ideas on how I can adjust the window's opacity via frontend or backend?

Try controlling this via CSS instead of the native window apis. They may not support any values between 1 and 0 on all platforms.

And also as to why the window never stays on top of other windows when you click off of it?

Which platform? Not all platforms have a always on top feature that's controllable on the application side (e.g. Wayland)

[cmcburnieucf]

Thank you for your reply. I will try using CSS instead and let you know how it goes. As for platform, I am not entirely sure but I know it is not Wayland.

[FabianLars]

As for platform, I am not entirely sure but I know it is not Wayland.

With platform i meant operating system

[cmcburnieucf]

Oh, I see. I thought you meant display protocol. I am testing this on both Windows 10 and Kali Linux, completely different devices.

[FabianLars]

hmm, so on Windows always-on-top should work afaik 🤔 Linux is a bit inconsistent in that regard.

[cmcburnieucf]

Thank you co much for your help! I focused on using CSS only and actually realized I forgot to import ./App.css. I kept the JSON file and CSS file the same. These two fixes actually resolved my issue.