White flash on page refresh

b23albst commented

2026-04-29 13:05:32 +00:00

Collaborator

When refreshing the page, there is a quick flash of white, most noticeable when using dark mode. This needs to be fixed

f21marfo commented

2026-04-29 13:24:16 +00:00

Collaborator

This issue needs more information. Browser? Operating system? Device? Is the browser in dark/light mode?

b23albst commented

2026-04-30 00:24:57 +00:00

Author

Collaborator

Oh, sorry. After testing having tested on different devices, I noticed the issue when using firefox on ubuntu and firefox and edge on windows. I could not see the flash when using chrome on ubuntu. The browser was in dark mode for all tests.

a24timsv commented

2026-04-30 06:43:53 +00:00

Collaborator

Directly (like "directly-when-pressing-the-button" directly) after hitting refresh? Can it be that the page is loading in and the CSS hasn't loaded in yet? I imagine that a webpage loads the HTML structure first, then applies CSS. Then the bright flash might be the body defaulting to white.

b23albst commented

2026-04-30 08:09:38 +00:00

Author

Collaborator

Yeah, I suspect this is the problem

b24idalu was assigned by a24vinla

2026-04-30 08:51:55 +00:00

b24idalu commented

2026-05-02 14:23:33 +00:00

Collaborator

A white flash is usually a rendering + CSS timing problem, sometimes influenced by the browser. The browser paints the page before CSS/theme styles are fully applied, which is what you guys suspected.

Firefox tends to paint earlier which causes a more visible flash while Chromium (Chrome/Edge) may delay paint slightly. I only got the problem on firefox when I tested, and fixed the white flash's color by fixing a reference to the theme.css that was broken (it now flashes the chosen themes bg color). But I do not think it will be possible to fix the whole flashing issue. The login modal also uses a different colored background which will make it more apparent when reloading.

What professionals do to avoid flashing light: split up the rendering into two stages, the necessary (background, theme, layout) and the secondary (other components), renders a skeleton first before the actual stuff (skeleton components) and sets rules to prevent performance issues. Maybe some rules should be set here to keep the performance low?

A white flash is usually a rendering + CSS timing problem, sometimes influenced by the browser. The browser paints the page before CSS/theme styles are fully applied, which is what you guys suspected. Firefox tends to paint earlier which causes a more visible flash while Chromium (Chrome/Edge) may delay paint slightly. I only got the problem on firefox when I tested, and fixed the white flash's color by fixing a reference to the theme.css that was broken (it now flashes the chosen themes bg color). But I do not think it will be possible to fix the whole flashing issue. The login modal also uses a different colored background which will make it more apparent when reloading. What professionals do to avoid flashing light: split up the rendering into two stages, the necessary (background, theme, layout) and the secondary (other components), renders a skeleton first before the actual stuff (skeleton components) and sets rules to prevent performance issues. Maybe some rules should be set here to keep the performance low?

a24sakma commented

2026-05-05 11:09:39 +00:00

Collaborator

@b24idalu I think you can write an issue for this for what you have researched. Otherwise if that is complicated one method is to have an simple text informing the customer that the page is loading with text information then we can show the page after 2s delays.

When the issue is created I can close this issue.

@b24idalu I think you can write an issue for this for what you have researched. Otherwise if that is complicated one method is to have an simple text informing the customer that the page is loading with text information then we can show the page after 2s delays. When the issue is created I can close this issue.

b24idalu commented

2026-05-05 12:31:29 +00:00

Collaborator

I am currently creating a skeleton for the issue, that should be able to cover the flash. Will create a PR when it is done.

👍 1

b24idalu referenced this issue

2026-05-05 13:53:41 +00:00

#654-flashes-on-refresh #759

a24sakma commented

2026-05-06 07:53:43 +00:00

Collaborator

the pr is merged I close this issue.