Mica Background in Tauri JS

[PacifiK2460]

How can I enable the mica / blur background in Tauri JS?, I followed some threads here but can't get it working.

Deleteing / setting to transparent any css property about background results in a white background:

Cargo.toml

#...

[dependencies]
tauri = { version = "1.0.3", features = ["api-all"] }
window-vibrancy = "0.1.3"

#...

main.rs

#[cfg(target_os = "windows")]
use window_vibrancy::{apply_mica, apply_blur};

//...

  let main_window = app.get_window("main").unwrap();
  #[cfg(target_os = "windows")]
  {
       apply_mica(&main_window)
                .expect("Unsupported platform! 'apply_mica' is only supported on Windows");
  }

//...

tauri.conf.json

"windows": [
  {
    "fullscreen": false,
    "height": 600,
    "resizable": true,
    "title": "Title",
    "width": 800,
    "visible": true,
    "transparent": true,
    "center": true
  }

[abisar]

Go to inspect and check if there is any css background property on your html, body, or any main div tag.

[PacifiK2460]

Displays a complety blank background

[dohabristy]

please solve my problem

no content show only icon why

[ghost]

I solved the problem in this way

[PacifiK2460]

Almost!, solved it this way:

  main_window.minimize().unwrap();
  main_window.unminimize().unwrap();

  main_window.maximize().unwrap();
  main_window.unmaximize().unwrap();

Result:

[PacifiK2460]

Looks like minimizing, unminimizing, then maximizing and unmaximizing solved the problem.

  main_window.minimize().unwrap();
  main_window.unminimize().unwrap();

  main_window.maximize().unwrap();
  main_window.unmaximize().unwrap();

Result:

[cjmaxik]

Sorry, but is there any solution, not a workaround?

[zlstringham]

Is this still a system limitation? It's supported in wails and this type of hack isn't required.

[FabianLars]

Yes it is. There is a workaround though that we didn't implement yet. I assume in wails they did because of how they implemented window color settings (afaik the workaround is really similar to that, meaning that you have to manually draw on the window once to clear it idk)

[zlstringham]

I think in wails they set WS_EX_NOREDIRECTIONBITMAP for this purpose, if I'm interpreting things correctly. I also see that set in other places as well. (ex 1, ex 2. See also this comment and this one)

It seems tao supports this, though I don't think tauri is using it anywhere.

I'll try to test this out when I have more time, but my current thinking is we might just need a way to set this during window creation in tauri. Looking at the dev branch it looks like we might be adding some way to set Mica in the WindowConfig, so maybe in those cases the tao window could be created with WS_EX_NOREDIRECTIONBITMAP.

Is this the workaround you mentioned?

[FabianLars]

Is this the workaround you mentioned?

No it's not (i think). pinging @amrbashir (mainly for work coordination i guess) who knows more about this stuff than me anyway and iirc he talked about this not so long ago.

[amrbashir]

WS_EX_NOREDIRECTIONBITMAP should work fine for your use-case but the reason we don't use it in Tauri is because we need to support tauri-egui which needs to draw to the window surface. A proper solution would be to use something like softbuffer crate and draw transparent color on the window in reaction to RedrawRequestedEvent (which we don't expose atm).

Until I fix this issue internally in Tauri, you can try setting the flag manually or maybe start your window without decorations and then add the decorations later (an improved workaround from the workaround above).

[everdrone]

Is there a solution? I'm having this issue in tauri-apps/tao

window.set_visible(false);
window.set_visible(true);

will render the window completely white