MUI Text flickers on firefox

[gmzacharydovel]

Steps to reproduce

Steps:

1. Setup MUI
   2.Notice the text flickers when opening things like a Select
   3.Notice if you use the virtualization examples on the MUI documentation, things flicker like crazy

Current behavior

Text seems to be arbitrarily reloaded. Setting the font with a css important override seems to help somewhat

Expected behavior

The text shouldn't flicker

Context

No response

Your environment

npx @mui/envinfo

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

Search keywords: font flicker

[gmzacharydovel]

Sorry for making this while researching. I'm trying to get a minimal repro. I'll add a video of whats happening. The parent elements don't seem to be having a rerender. I think the fonts are being fully reloaded and I have no idea why. It makes me look a bit like an idiot with MUI, and I haven't seen it before.

Screen.Recording.2025-04-12.at.11.16.55.mov

[gmzacharydovel]

Is there an obvious reason for this form the MUI team?

[ZeeshanTamboli]

Is there an obvious reason for this form the MUI team?

@gmzacharydovel There's no obvious reason for this on MUI’s side — the components themselves don’t trigger that kind of re-render. A minimal reproduction would really help us investigate further.

[github-actions]

Since the issue is missing key information and has been inactive for 7 days, it has been automatically closed. If you wish to see the issue reopened, please provide the missing information.

[gmzacharydovel]

I started on a repro, but I haven't had time. I've done years of react and I'm not really doing something weird. Client for current work will get a flickering app in Firefox. it seems better in Firefox.

What I don't understand is this is implying the fonts are loading/unloading which requires very specific css.

[gmzacharydovel]

If I can get some time, I'll come back to this. Worst case, I'm trying to move off of MUI to something web component based. But if I can find the time I will find a minimal repro.

[gmzacharydovel]

@ZeeshanTamboli I've never seen the flicker before. You have any ideas what would cause it on your side? I have a fair amount of code to cut through... though none of it touches fonts.

[ZeeshanTamboli]

You have any ideas what would cause it on your side?

I don’t have anything on my side to check it with.

[gmzacharydovel]

@ZeeshanTamboli What I mean is, knowing the code would there be an obvious reason.

[gmzacharydovel]

repro.zip

This is a minimal repro project I made. You need to install deno to run it. After that:

deno install
deno dev

Repro:

• Opening Firefox, you should force a full refresh (command-shift-r on a Mac I think).
• Click the autocomplete
• Notice the font sometimes flickers

With more elements, the amount of flickering increases if it has to go down the full dom render tree. My instance is that emotion is adding/remove the css elements which causes firefox to reload the font.

Notes:

• These seems more likely to happen when Japanese text is included
• Making the theme object a singleton doesn't seem to effect this
• It doesn't always happen. It seems if the render takes too long it is more likely to happen
• it seems more likely to happen when a base react element has an update and the page reaches a size threshold

My Setup:

• macOs 15.4.1 (24E263)
• Firefox 137.0.2

[gmzacharydovel]

Screen.Recording.2025-04-28.at.9.10.03.mov

Video of the repro.

[gmzacharydovel]

Another interesting point of this repro...if you disconnect from the internet and:

Do a hard refresh you get a serif font:

Do a soft refresh you get a sans font:

[gmzacharydovel]

Here is me reloading the page back and forth repeatedly:

Screen.Recording.2025-04-28.at.10.32.53.mov

This is actually pretty scary it doesn't load consistently.

[gmzacharydovel]

I don't think Chrome has this problem. Chrome also deals better with the garbage collection in dev mode caused by emotion. So that is likely also involved.

[ZeeshanTamboli]

Looks like an issue in Emotion or Firefox. I don't think we can do anything on Material UI's side.