oliverschwendener / electron-fluent-ui

Template for developing Electron applications using TypeScript and Fluent UI React components
MIT License
49 stars 11 forks source link

Completely white background until window is resized #15

Closed HenrikoMagnifico closed 3 months ago

HenrikoMagnifico commented 4 months ago

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.

image

hydexon commented 3 months ago

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 commented 3 months ago

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: https://github.com/electron/electron/issues/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:

https://github.com/oliverschwendener/electron-fluent-ui/blob/ef7c461300b5ea82b8be942b410a1f6ad32ea9ab/src/main/index.ts#L7-L16