Question 271118 in CSS Question posted in
Some basic documentation can be found here.

Css – Tauri transparent window only works when resized

I’m making an app where the window is translucent using SvelteKit + Tauri.

I’ve tried setting the transparent to true in tauri.conf.json and the container element has a 0.92 opacity in css.

// tauri.conf.json
"windows": [
    {
        "fullscreen": false,
        "height": 600,
        "resizable": true,
        "title": "Pastato",
        "width": 800,
        "transparent": true
    }
]

.container {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;

    width: 100%;
    height: 100vh;

    padding: 1rem;

    background: rgba(41, 41, 41, 0.92);
}

This worked but not at the start. I had to resize the window to clear the flat color it gave me.
enter image description here

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Found the solution on Tauri's Discord server.

    I need to set decorations to false and use the JS API to set it back to true later.

    "windows": [
    {
        "fullscreen": false,
        "height": 600,
        "resizable": true,
        "title": "Pastato",
        "width": 800,
        "transparent": true,
        "decorations": false
    }
]

    import { appWindow } from '@tauri-apps/api/window';
import { onMount } from 'svelte';

onMount(async () => {
    await appWindow.setDecorations(true);
});

  2. 0

    If you want to make the window as a whole partially transparent, you might be able to use window-vibrancy instead, which uses platform-specific functionalities for such an effect. (It is not available everywhere and may couple it to a blur effect, though.)

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search