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.

[thomasloven]

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]

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