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

10

Do you use a reverse proxy?

I realized today that without the reverse proxy to http://123.123.123.123:8123 that I can see the icons.

But to be honest I am really wondering why the heck Home Assistant, localaly hosted, needs to download images from the internet when used?

Any Idea how I can prevent this? There should be no reason every time I switch to a menue that a connection goes straight in the internet.

1 Like
11

Strange… I have disabled basically all of my extensions… It still isn’t working properly.

12
1 Like
13

Yeah, I feel like there should be a copy of these icons available in Home Assistant. Maybe it’s easier to be network hosted, but wouldn’t that also mess with the appearance of Home Assistant for those who have their instance completely “air-gapped.”

EDIT: Have read the previous discussion relating to this topic and understand that downloading all the icons would require a large size increase. Instead, why not allow the user to choose with an option in Home Assistant? Allow the user to download all icons, only the ones in use, or not download any.

14

I voted for the first feature request, I would recommend everyone reading this do the same. Maybe it can cause a fix to this problem as a result?

15

Vote where?

16

On the feature request you linked:

Screenshot_20241009-095343
Screenshot_20241009-0953431080×321 48.2 KB

Click the button: Vote (mine says voted because I already clicked it). It’s at the top of that thread

1 Like