Firefox doesn't load icons

Configuration Frontend
1

Hello,
I recently switched to Firefox from chrome and noticed a few issues with Firefox and Home Assistant.

  1. Most importantly, icons from https://brands.home-assistant.io only load properly when hard refreshing with Control + Shift + R, even after fully disabling my browser cache using settings or using developer tools and checking “disable cache” under network (see Browser.cache.memory.enable - MozillaZine Knowledge Base and Browser.cache.disk.enable - MozillaZine Knowledge Base for the settings I changed if relevant).
    What it looks like

    incorrect
    incorrect431×648 7.75 KB

    What it should look like (Ctrl+Shift+R)
    image
    image542×594 23.3 KB

  2. Certain card previews load incorrectly when adding a new card:
    image
    image

  3. Certain pre-loaded fonts do not load/work correctly.
    The number (1) is using the wrong font (Firefox):
    image
    The number is using the correct font (Chrome):
    image
    Some fonts are also bolder, probably as a result of this issue:
    Firefox (title and state are more thick):
    image
    Chrome (title and state are less thick):
    image

Custom Integrations Installed:

Custom Lovelace/Frontend Installed:

If you need any more details to troubleshoot, I will be happy to provide them!

2

Do you see any failing requests in browser’s developer tools > network tab? Or any errors in console?

Do you face the issue also while in Incognito mode? If not, maybe some of Firefox extensions (e.g. some dark mode extensions or custom css injectors) are the root cause of issue.

3

I think you’ve got me closer:
Using an incognito window does not have any problems. So, I disabled all my extensions, cleared all cache, cookies, and history (on a regular window). Then, I logged in again (on a regular window) and I still have the same problem.
There is a developer console error:

image
image712×139 6.43 KB

The CORS message only appears in certain menus. In others, the ServiceWorker Error Response is the only message that displays.

The network tab also displays an error for a request to the same url:

image
image1754×717 50.7 KB

I have also disabled Firefox’s built in ad/tracker blocking for my home assistant domain (if that matters)

4

Exact same problem and symptoms here: Firefox, images not loading, shift-reload making them work until tab close, CORS error messages but no change when I disable CORS with a extension, same NS_ERROR in the network tab.

1 Like
5

Two questions for you:
Do the icons load in an incognito window?
What custom dashboard elements do you have installed?
Maybe we can find a pattern?

6

Yes, it works in private mode (I guess because private mode bypass the cache, or it wouldn’t be private). And it never worked, even before I set-up any dashboards or installed any add-on (I’ve only been using HA for about a month, so I remember).

But it also works in Firefox Portable (which use a new separate profile from Firefox normal, so no extensions). Even when closing FF portable and reopening, so with using the cache of the previous session. It’s probably caused by some Firefox extensions, of which I have unfortunately plenty

7

Interesting… This is strange because it doesn’t work even when I disable all of my extensions in Firefox settings (which I don’t have too many of)

8

Do you think I should just open a bug report in the home assistant frontend github?

Not sure if this is the right repo…

9

I disabled my user agent switcher extension, and suddenly it worked. Better yet, I re-enabled it after, and it still works! I have all the icons displayed now