Flashing Backgrounds...

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 (<anonymous>) at HTMLElement._connect (card-mod.js:1)

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.

[4meuwil]

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

[thomasloven]

Please try 3.0.6