lovelace-card-mod: Card backgrounds not loading reliably

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:

Understand that this is a channel for reporting bugs, not a support forum (https://community.home-assistant.io/).
Have made sure I am using the latest version of the plugin.
Have followed the troubleshooting steps of the “Common Problems” section of https://github.com/thomasloven/hass-config/wiki/Lovelace-Plugins.
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.

About this issue

Original URL
State: closed
Created 3 years ago
Reactions: 2
Comments: 15 (2 by maintainers)

Most upvoted comments

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.

thomasloven on Nov 6, 2021

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

thomasloven on Nov 21, 2021

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

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

habitoti on Nov 8, 2021

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

koying on Nov 6, 2021