Completely white background until window is resized

[HenrikoMagnifico]

This seems to be an issue both in the release template executable, as well when running a clean install with "npm run dev", or in a built project packaged using a clean install of this project. The background stays completely white, ignoring the "backgroundMaterial: 'mica' or 'acryllic' attributes set on window creation. I have tried my best to find a fix for this issue, to no avail. I have replicated this issue on another machine running Windows 11 as well. Setting "frame: false" fixes the issue, although for most purposes having "frame: true" is important. Also launching the app on a secondary screen seems to fix the issue, for some reason. Although this isn't either a suitable solution to the problem. Doing something like "window.resizeBy(790,680);" works too, but again, not ideal.

[hydexon]

I had this issue before, i can workaround it by removing a property at src/renderer/App.tsx:
<FluentProvider theme={theme} style={{ height: "100vh", background: "transparent" }}> to <FluentProvider theme={theme} style={{ height: "100vh"}}> should fix the issue

[oliverschwendener]

I also experience this issue from time to time. Sometimes it happens, sometimes not. I think it's an issue of electron's implementation of the backgroundMaterial effect on Windows. Sometimes it fixes the issue after resizing the window. See this bug report on the electron repository: electron/electron#41072

@hydexon The transparent background is needed to see the backgroundMaterial effect (mica or acrylic). If you don't need the backgroundMaterial in your application you can remove the background: transparent and remove the backgroundMaterial: "mica" from here:

electron-fluent-ui/src/main/index.ts

Lines 7 to 16 in ef7c461

	return new BrowserWindow({
	autoHideMenuBar: true,
	backgroundMaterial: "mica",
	vibrancy: "header",
	webPreferences: {
	preload: preloadScriptFilePath,
	},
	icon: join(__dirname, "..", "build", "app-icon-dark.png"),
	});
	};