[Bug]: White screen momentarily shows upon un-minimizing window

[AMDphreak]

What happened?

Problem

There is a white flash that happens when I un-minimize the window. Many electron apps do this. Slack does this. It is a webview rendering annoyance. Can you please hot-fix it in your app and submit a bug report upstream to get this behavior fixed for all Tauri apps? There should be a better default behavior for Tauri.

Explanation

The "white flash" when unminimizing Electron and Tauri apps on Windows is a common issue related to how the operating system and the webview component handle window rendering and content loading. Here's a breakdown of the reasons and common mitigation strategies:

Reasons for the White Flash:

1. Webview Initialization Delay: Both Electron and Tauri use webview technologies (like Chromium for Electron and WebView2 for Tauri) to render the application's UI. When a window is unminimized, the webview might take a brief moment to initialize or re-render its content. During this split second, before the web content is fully painted, the default background color of the native window (often white) is visible.

2. GPU Acceleration and Rendering Pipeline: The rendering process often involves the GPU. There might be a slight delay as the GPU context is re-established and the first frame of the web content is drawn, leading to the brief display of the default background.

3. Windows Animation Behavior: Windows itself has minimize/maximize animations. The combination of these animations and the webview's rendering lifecycle can expose the underlying blank window before the app's content is ready.

4. Content Loading: If your application's initial content (HTML, CSS, JavaScript) is heavy or takes time to load, the webview might show a blank (white) screen until all resources are ready.

Mitigation Strategies (How developers try to fix it):

• Setting backgroundColor: Developers can set the backgroundColor property of the BrowserWindow (Electron) or WindowOptions (Tauri) to match the app's primary background color. This ensures that even if there's a flash, it's not a jarring white, but rather a color closer to the app's theme.

  • Electron example:

    const mainWindow = new BrowserWindow({
      width: 800,
      height: 600,
      backgroundColor: '#282c34', // Example dark background color
      show: false // Important for the next step
    });
    

• Waiting for ready-to-show event: Both frameworks provide events that fire when the web content is ready to be displayed. By setting show: false when creating the window and then calling mainWindow.show() (Electron) or appWindow.show() (Tauri) after the ready-to-show or DOMContentLoaded event, developers can delay showing the window until its content is loaded.

  • Electron example:

    mainWindow.once('ready-to-show', () => {
      mainWindow.show();
    });
    

• Off-screen rendering (Workarounds): Some developers use "hacks" like positioning the window off-screen or setting its size to 0,0 initially, then moving it to the correct position and size after the content loads. This can sometimes bypass the visual flicker.

• Disabling hardware acceleration: In some rare cases, disabling hardware acceleration (app.disableHardwareAcceleration() in Electron) might help, although this can impact performance.

• Optimizing frontend loading: Ensuring that the initial load of your web application is as fast as possible (e.g., lazy loading, code splitting, efficient CSS) can reduce the duration of the white flash.

While these strategies can significantly reduce or change the appearance of the flash, it's a persistent challenge, especially on Windows, due to the underlying OS and webview rendering mechanisms. It's often difficult to eliminate entirely because of the inherent delay in drawing the first frame of a complex UI on a native window.

Distribution version

Windows x64

App Version

0.22.2

Relevant log output

[affine-issue-bot[bot]]

Issue Status: 🆕 *Untriaged

*🆕 Untriaged

The team has not yet reviewed the issue. We usually do it within one business day. Docs: https://github.com/toeverything/AFFiNE/blob/canary/docs/issue-triaging.md

^{_{This is an automatic reply by the bot.}}

[aliuq]

Same issue, can't recover after white screen