mod-card causes flickering if jinjia2 used for styling

My Home Assistant version: 2021.11.5 My lovelace configuration method (GUI or yaml): yaml, storage

What I am doing: Applying card-mod styles dependingly on some condition.

What I expected to happen: Styling is applied, picture is stable.

What happened instead: Picture is flickering - styles are not applied sometimes.

The code below contains 4 rows (template-entity-row) with card-mod:

1. Styles are constant.
2. Styles are constant, the row is placed into mod-card.
3. Styles depend on input_boolean value.
4. Styles depend on input_boolean value, the row is placed into mod-card.

The 4th row is flickering (video):

Do not observe this with card-mod 3.0.13.

Minimal steps to reproduce:

type: entities
entities:
  - type: custom:template-entity-row
    name: simple row
    icon: mdi:account
    secondary: sec
    card_mod:
      style:
        div#wrapper: |
          .info.pointer .secondary {
            color: orange;
          }
          state-badge {
            display: none;
          }
  - type: custom:mod-card
    card:
      type: custom:template-entity-row
      name: row inside mod-card
      icon: mdi:account
      secondary: sec
    card_mod:
      style:
        template-entity-row$div#wrapper: |
          .info.pointer .secondary {
            color: orange;
          }
          state-badge {
            display: none;
          }
  - type: section
    label: conditional styling
  - input_boolean.test_boolean
  - type: custom:template-entity-row
    icon: mdi:account
    name: simple row
    secondary: sec
    card_mod:
      style:
        div#wrapper: |
          .info.pointer .secondary {
            {% if is_state('input_boolean.test_boolean','on') %}
            color: orange;
            {% endif %}
          }
          state-badge {
            display: none;
          }
  - type: custom:mod-card
    card:
      type: custom:template-entity-row
      icon: mdi:account
      name: row inside mod-card
      secondary: sec
    card_mod:
      style:
        template-entity-row$div#wrapper: |
          .info.pointer .secondary {
            {% if is_state('input_boolean.test_boolean','on') %}
            color: orange;
            {% endif %}
          }
          state-badge {
            display: none;
          }

Error messages from the browser console:

Info:

---

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.

[ildar170975]

Thomas, seems to be fixed!!! Thank you very very much

[DavidFW1960]

OK so it’s flicking like crazy here. But when I turned the input_boolean on it stoppen off and on again and it’s flickering with no real reason I can see. I’m really sorry I have been shitty and slow trying to help with this but I’ve been under the hammer here…