Card backgrounds not loading reliably

tomlut commented 2 years ago

My Home Assistant version: 2021.11.1

My lovelace configuration method (GUI or yaml): GUI

What I am doing: Loading card backgrounds with card mod when navigating to Home Assistant.

What I expected to happen: Card backgrounds load.

What happened instead: Some card backgrounds load, some dont. see: https://imgur.com/a/VmBFWbi

It's worse if I am using a slower connection like through Nabu Casa. Navigating to the page locally nearly always works as expected.

It’s often not the same cards. It occurs in both Chrome and Firefox and for a change Safari (iOS mobile app) is actually ok most of the time too (even when remote).

If I refresh the home view or clear the cache on the home view it may change which card backgrounds disappear but if I refresh the page on another view then switch to the home view it displays backgrounds correctly.

This only occurs when using 2021.11.1 downgrading to 2021.10.6 stops the issue occurring.

Minimal steps to reproduce: Navigate to Home Assistant

(themes.yaml)

day:
  card-mod-theme: day
  card-mod-card: |
    ha-card.top-level-card {
      border: solid 1px var(--primary-text-color);
      background: url("/local/background/card_bg_Day.png");
    }

(in each card)

card_mod:
  class: top-level-card

Error messages from the browser console: See the first image in the link above.

By putting an X in the boxes ([]) below, I indicate that I:

[X] Understand that this is a channel for reporting bugs, not a support forum (https://community.home-assistant.io/).
[X] Have made sure I am using the latest version of the plugin.
[X] Have followed the troubleshooting steps of the "Common Problems" section of https://github.com/thomasloven/hass-config/wiki/Lovelace-Plugins.
[X] Understand that leaving one or more boxes unticked or failure to follow the template above may increase the time required to handle my bug-report, or cause it to be closed without further action.

koying commented 2 years ago

Probably same as #152 and I have the same kind of issue. After a refresh, some styles are applied, some (most) not.

PS: Maybe relevant. I have multiple views, and if I refresh on one view, then go to a style enabled one, styles seem reliably applied

L-E-0-N commented 2 years ago

Same here, updated from 3.0.12 to 3.0.13 and a lot of the custom stying isn't loaded upon a page refresh.

thomasloven commented 2 years ago

This is a timing issue that's hard to fix.

There is something you can try, though. In your configuration.yaml add:

frontend:
  extra_module_url:
    - /local/wherever/card-mod.js

and then restart Home Assistant and clear your browser caches. This will make card-mod load before anything else, and let it do its magic in peace.

You will probably get an error in your browser console about something something undefined something themes something. This can be safely ignored, and I know how to fix it if this workaround works.

tomlut commented 2 years ago

Thanks Thomas. That does seem to have fixed the issue.

The card mod error I now see in the inspector is:

Uncaught DOMException: CustomElementRegistry.define: 'mod-card' has already been defined as a custom element

And in the system log:

Logger: frontend.js.latest.202111030
Source: components/system_log/__init__.py:190
First occurred: 11:57:24 (6 occurrences)
Last logged: 12:56:08

https://<redacted>.nabu.casa/hacsfiles/lovelace-card-mod/card-mod.js?hacstag=1909275243013:6:0 NotSupportedError: CustomElementRegistry.define: 'mod-card' has already been defined as a custom element
http://10.1.1.100:8123/hacsfiles/lovelace-card-mod/card-mod.js?hacstag=1909275243013:6:0 NotSupportedError: CustomElementRegistry.define: 'mod-card' has already been defined as a custom element

habitoti commented 2 years ago

This is a timing issue that's hard to fix.

There is something you can try, though. In your configuration.yaml add: ...

Same issue here lately for markdown card (changing font size). This workaround works for me!

bictorv commented 2 years ago

The workaround doesn't seem to work for me, but reloading in another view does seem to work.

koying commented 2 years ago

Are you sure you used extra_module_url? I read too diagonally as well ;)

bictorv commented 2 years ago

Are you sure you used extra_module_url? I read too diagonally as well ;)

Aaargh. I spelled extra_module_url correctly, but not the pathname! :-o

habitoti commented 2 years ago

This should work with copy/paste (if installed via HACS):

frontend:
  extra_module_url:
    - /local/community/lovelace-card-mod/card-mod.js

L-E-0-N commented 2 years ago

Workaround works here 👍

Thanks @thomasloven !

nao-pon commented 2 years ago

Thanks guys! 👍

I think it's probably a problem related to #152. I tried the solution presented in this thread. The issue was resolved on the web browser (Chrome latest), but not on the Android app (Pixel6 / Android12). For the time being, I'm reverting to v3.0.12 to work around this issue.

seranoo commented 2 years ago

Workaround works here 👍

Thanks @thomasloven !

thomasloven commented 2 years ago

In the new release 3.1.0 this is now the recommended installation method.

pergolafabio commented 2 years ago

Hi @nao-pon , for me the issue is indeed fixed in chrome but in HA app companion, i still see the backgrounds, even if i clear cache how can we resolve this on the HA app?

tomlut commented 2 years ago

In the new release 3.1.0 this is now the recommended installation method.

Unfortunately v3.10 has caused this issue to reoccur:

https://github.com/thomasloven/lovelace-card-mod/issues/66#issuecomment-788791065

thomasloven / lovelace-card-mod

Card backgrounds not loading reliably #153