Tauri透明窗口仅在调整大小后生效的问题求助

我在使用SvelteKit + Tauri开发半透明窗口应用时遇到以下问题：

已在tauri.conf.json中开启窗口透明：

// 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);
}

但应用启动时窗口显示纯色背景，只有调整窗口大小后，半透明效果才会正常生效。

解决方法 #

1. 窗口初始化后强制触发重绘

在src-tauri/src/main.rs中，通过微小调整窗口尺寸触发重绘（用户无感知）：

use tauri::{Manager, Window};

fn main() {
    tauri::Builder::default()
        .setup(|app| {
            let window = app.get_window("main").unwrap();
            // 获取当前窗口尺寸
            let (width, height) = window.inner_size().unwrap();
            // 先放大1px再还原，触发重绘
            window.set_inner_size(tauri::Size::Physical(tauri::PhysicalSize { width: width + 1, height })).unwrap();
            window.set_inner_size(tauri::Size::Physical(tauri::PhysicalSize { width, height })).unwrap();
            Ok(())
        })
        .run(tauri::generate_context!())
        .expect("error while running tauri application");
}

2. 动态设置CSS背景样式

在Svelte组件的onMount钩子中延迟设置背景，避免初始化渲染延迟：

<script>
    import { onMount } from 'svelte';

    onMount(() => {
        const container = document.querySelector('.container');
        if (container) {
            container.style.background = 'rgba(41, 41, 41, 0.92)';
        }
    });
</script>

<div class="container">
    <!-- 应用内容 -->
</div>

<style>
    .container {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        width: 100%;
        height: 100vh;
        padding: 1rem;
        /* 初始设为透明，避免纯色闪烁 */
        background: transparent;
    }
</style>

3. 禁用窗口装饰（可选，无标题栏场景）

若不需要系统标题栏，可在tauri.conf.json中添加decorations: false，部分场景下可解决透明同步问题：

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

问题原因 #

该问题源于Tauri初始化时，WebView渲染与窗口透明属性的同步存在延迟。调整窗口大小会触发系统的窗口重绘逻辑，此时透明样式才会被正确应用。上述方案均通过强制触发重绘或调整渲染时机来解决同步延迟问题。

内容的提问来源于stack exchange，提问作者Patato