I have a main lovelace view that’s a single Picture Elements card that I use on several tablets around the house. Seemingly randomly but somewhat frequently (average of say once a day+?), the CSS styles I’ve added (both direct and ones using Card Mod) are ignored. One of the tablets uses the HA app (and is regularly updated to the current version, it’s a Kindle Fire 8) and the others just use a web browser (Chromium running on Raspberry Pi OS running on original MS Surface tablets, it’s a whole thing) and while sometimes a forced refresh (or reloading the app) works, more often than not it doesn’t. Sometimes it seems like multiple tablets have the issue at once, but certainly not always. I tend to make frequent enough tweaks to my dashboards and HA in general that I really don’t know if it’s tied to me making changes or not. The only consistent way I’ve found to fix the issue is to edit some part of the dashboard (i.e. add/delete a character in a card) so that it ‘thinks’ something has changed on the dashboard so that the refresh box pops up at the bottom and click that. That almost always fixes the issue (although very occasionally I have to do this twice).
Here’s a screenshot of the view and a snippet of the kind of CSS stuff I have:
- type: state-badge
entity: sensor.total_co2_equivalent
style:
top: 38%
left: 93%
transform: translate(-50%, -50%) scale(1.75, 1.75)
card_mod:
style: |
:host {
color: rgba(0,0,0,0);
{% set temp = states('sensor.total_co2_equivalent')|float(0) %}
{% if temp > 17.5 %}
--label-badge-text-color: red;
{% endif %}
{% set temp2 = states('sensor.co2_signal_co2_intensity')|float(0) %}
{% if temp2 > 700 %}
--label-badge-red: DeepPink;
{% elif temp2 < 500 %}
--label-badge-red: LimeGreen;
{% else %}
--label-badge-red: Orange;
{% endif %}
tap_action:
action: navigate
navigation_path: /lovelace/energy
It’s not a BIG deal and I’ve been living with it for some time, but it’s still annoying. I keep everything up-to-date pretty much as soon as a new release drops. Any ideas?