Flashing Backgrounds...

[4meuwil]

My Home Assistant version: 2021.2.3

My lovelace configuration method (GUI or yaml): yaml What I am doing: using card-mod to set the background of picture elements card based on sensor data providing a url What I expected to happen: Function normally as it has for 6 months What happened instead: upgrade to v3 has made the images flash repeatedly and throw errors in chrome Minimal steps to reproduce:

# The least amount of code possible to reproduce my error
(decluttering card)
  youtube:
    card:
      type: picture-elements
      card_mod:
        style: |
          ha-card {
            background-image: url("{{ state_attr('sensor.[[sensor]]', 'entity_picture') }}");
            background-repeat: no-repeat;
            background-size: 100%;
          }
      image: /local/placeholders/youtube.png
      elements:
        - type: custom:hui-element
          card_type: markdown
          content: >
            [<ha-icon icon="mdi:youtube"></ha-icon>]( {{ state_attr('sensor.[[sensor]]', 'url') }} )
          style:
            top: 0
            left: 0
            margin: -11px 0px 0px -13px
            font-size: 14px
            color: var(--primary-color)
            transform: initial
            --ha-card-background: none
            --ha-card-box-shadow: none
            --theme-border: none
        - type: state-label
          entity: sensor.[[sensor]]
          style:
            top: 0
            left: 0
            margin: 0px 0px 0px 20px
            font-size: 14px
            color: var(--primary-color)
            transform: initial
            pointer-events: none

- another example of a card that has been working for months and suddenly flashing -

  - type: picture-elements
    style: |
        ha-card {
          background-image: url("{{ states.sensor.spacex_latest_launch_mission_patch_template.state }}");
          background-repeat: no-repeat;
          background-size: 35%;
          background-position: 95% 37.5%;
        }
    image: /local/images/SpaceX-5.png
    elements:
      - type: image
        image: /local/images/spacex-logo3.png
        style:
          top: 0
          left: 0
          transform: initial
          width: 100%
          margin: 5px 5px 5px 5px
          pointer-events: none

# End of code

• tried with and without card_mod:
• cleared cache 10 times, tried multiple machines, reinstalled, rebooted
• no issues in iOS app

Error messages from the browser console: Uncaught (in promise) TypeError: Failed to execute 'observe' on 'MutationObserver': parameter 1 is not of type 'Node'. at MutationObserver.observe () at HTMLElement._connect (card-mod.js:1)

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.

[KTibow]

Weird. Probably unrelated, but you should try using states('sensor.spacex_latest_launch_mission_patch_template') instead of states.sensor.spacex_latest_launch_mission_patch_template.state.

[4meuwil]

if it helps, my youtube tab has 23 cards with identical problem, my SpaceX tab only has 2 cards with problem. Inspecting both pages gives 20 entries of the same error. Also verified CARD-MOD 3.0.5 IS INSTALLED.

[KTibow]

Probably a real issue then. Hopefully the maintainer can get to fixing this, or your problem, soon.

[thomasloven]

Please try 3.0.6

[4meuwil]

3.0.6 has resolved errors and flashing.....thank you so much.

[IDmedia]

I have the same isuse on 3.0.7 with all cards that use jinja/templates in the CSS. I had the same issue on 2.x, but then I used "config-template-card" that mitigated the issue. For some reason that doesn't work anymore after upgrading to version 3.0.7.

Edit: Strange thing is that the flickering seems to stop once I go to the menu and hit "Refresh". Then the flickering stops untill I reload the page again (F5/CTRL+F5).

Video: https://youtu.be/KV-wHj89J84

I have cleared all cache multiple times. Happens on the latest version of Chrome and Firefox on Android and Windows. This is the card with the background all the way to the right, but all three cards on the top have template is the CSS and this issue:

type: vertical-stack
cards:
  - type: markdown
    card_mod:
      style:
        .: |
          ha-card ha-markdown { padding: 0px !important; }
        ha-markdown:
          $: |
            div {
              display: table;
              background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.4)), url("{{ state_attr('sensor.tibber_power_producer', 'currentProducer').imageSrc }}") no-repeat;
              background-position: center top;
              min-height: 350px;
              color: white;
              font-size: 1.2em;
              padding: 20px;
              text-align: left;
              box-shadow: var( --ha-card-box-shadow, 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12));
            }
            h2 {
              text-align: center;
            }
            table {
              margin-top: 8px;
              border-spacing: 0 0.5em;
              border-top: 1px solid rgba(255, 255, 255, 0.4);
            }
            td:first-child {
              width: 80px;
              font-weight: bold;
              vertical-align: top;
            }
    content: |
      {% set attr = state_attr('sensor.tibber_power_producer', 'currentProducer') %}
      <div>
        <h2>{{ attr.name }}</h2>
        {{ attr.description }}
        <table width=100%>
        <tr>
          <td>Owner:</td>
            <td>{{ (attr['bullets'] | selectattr('title', 'equalto', 'Owner') | list)[0].description }}</td>
        </tr>
        <tr>
          <td>Source:</td>
          <td>{{ (attr['bullets'] | selectattr('title', 'equalto', 'Source') | list)[0].description }}</td>
        </tr>
        <tr>
          <td>Terms:</td>
          <td>{{ (attr['bullets'] | selectattr('title', 'equalto', 'Terms') | list)[0].description }}</td>
        </tr>
        </table>
      </div>

[thomasloven]

Please open a new issue for this.

I've been stepping through your video frame by frame. Am I correct that the problematic ones are all markdown cards?

[IDmedia]

Sure, new issue created: #114 You are right about the fact that all of my cards are markdown cards.