Redmine

The phenomenon, known as FOUT (flash of unstyled text), occurs only when accessing the Redmine page for the first time or when performing a hard reload. It does not happen with subsequent accesses or regular reloads.

In Redmine 6.0.0, the font used on the screen has been changed to Noto Sans. Noto Sans is downloaded over the network from your Redmine server to the browser. Until the download is complete, the default font of the browser is displayed. Once the download is complete, it switches to Noto Sans. This is why the flash occurs when accessing the Redmine page for the first time or when performing a hard reload. However, for subsequent accesses, the font file is cached in the browser, so unless the cache expires or a hard reload is performed, the FOUT does not occur.

Thanks Maeda for the clarification.

I understand that FOUT might occur but this happens not only on the first load or hard reload but on the same page clicks too.

Now I tried other browsers and didn't see the same behavior. After some tests I figured out the Bitwarden extension on the Opera browser leads to it. (Bitwarden Extension Version: 2024.10.1)

Redmine 4, 5 on my servers and redmine.org does not do this behavior.

What could be the reason, any ideas? Is there anything I can do to figure out the root cause of it? It does not happen on other web sites, so can it be considered as a Redmine issue or not?

Unfortunately, I am not sure why the issue occurs in Opera with the Bitwarden extension installed, but as a workaround, you could try disabling the use of the Noto Sans font.

To do this, open app/assets/stylesheets/application.css with a text editor, and delete two blocks that starts with @font-face at the beginning. Then, change the value assigned to --fonts-main from "Noto Sans", sans-serif to sans-serif.

diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css
index f1166cbe0..00d3393ea 100644
--- a/app/assets/stylesheets/application.css
+++ b/app/assets/stylesheets/application.css
@@ -4,26 +4,8 @@
  * This code is released under the GNU General Public License.
  */

-@font-face {
-  font-family: "Noto Sans";
-  src: url("/NotoSans-VariableFont_wdth,wght.woff2") format("woff2");
-  font-weight: 100 900;
-  font-stretch: 75% 125%;
-  font-style: normal;
-  font-display: swap;
-}
-
-@font-face {
-  font-family: "Noto Sans";
-  src: url("/NotoSans-Italic-VariableFont_wdth,wght.woff2") format("woff2");
-  font-weight: 100 900;
-  font-stretch: 75% 125%;
-  font-style: italic;
-  font-display: swap;
-}
-
 :root {
-  --fonts-main: "Noto Sans", sans-serif;
+  --fonts-main: sans-serif;
 }

 html, body { min-height: 100vh; }

It is really strange that a password manager extension is causing this.

I didn't try the fix you provided, instead changed the extension to the Chrome one. (You can install Chrome extensions on Opera too.) Chrome extension on Opera browser doesn't cause the FOUT.

If it helps, i can try your fix and tell you the result.

Before realizing the forum i opened this issue as a defect so that is up to you to close this issue or not. I am not sure if it can be called as a defect or not.

Sorry to say I tested the change proposed in #41748 but it did not change the behavior.