mod-card causes flickering if jinjia2 used for styling

ildar170975 commented 2 years ago

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): azcdewsd

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:

[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.

ildar170975 commented 2 years ago

Why using mod-card here? By this way I am simulating using mod-card inside decluttering template.

ildar170975 commented 2 years ago

Same with multiple-entity-row inside mod-card:

type: entities
entities:
  - type: custom:multiple-entity-row
    entity: sun.sun
    name: simple row
    entities:
      - sun.sun
      - sun.sun
    card_mod:
      style: |
        hui-generic-entity-row {
          color: orange;
        }
  - type: custom:mod-card
    card:
      type: custom:multiple-entity-row
      entity: sun.sun
      name: row inside mod-card
      entities:
        - sun.sun
        - sun.sun
    card_mod:
      style:
        multiple-entity-row$: |
          hui-generic-entity-row {
            color: orange;
          }
  - type: section
    label: conditional styling
  - input_boolean.test_boolean
  - type: custom:multiple-entity-row
    entity: sun.sun
    name: simple row
    entities:
      - sun.sun
      - sun.sun
    card_mod:
      style: |
        hui-generic-entity-row {
          {% if is_state('input_boolean.test_boolean','on') %}
          color: orange;
          {% endif %}
        }
  - type: custom:mod-card
    card:
      type: custom:multiple-entity-row
      entity: sun.sun
      name: row inside mod-card
      entities:
        - sun.sun
        - sun.sun
    card_mod:
      style:
        multiple-entity-row$: |
          hui-generic-entity-row {
            {% if is_state('input_boolean.test_boolean','on') %}
            color: orange;
            {% endif %}
          }

Note that flickering on both cards is happening simultaneously (video of duration 26 sec):

cvbnm

Same with hui-element card.

DavidFW1960 commented 2 years ago

I am getting the same flickering with my MQTT card. the colour flickers from the RSSI percentage value to the colour. But not all the time and not on all lines but maybe because it's only when the RSSI zone changes.

        type: 'custom:mod-card'
        style:
          multiple-entity-row:
            $:
              hui-generic-entity-row:
                $: |
                  .info.pointer .secondary {
                    {% if states('sensor.[[device]]_rssi')|int(0) >= 100 %}
                    color: green;
                    {% elif states('sensor.[[device]]_rssi')|int(0) >= 80 %}
                    color: orange;
                    {% elif states('sensor.[[device]]_rssi')|int(0) >= 60 %}
                    color: magenta;
                    {% else %}
                    color: red;
                    {% endif %}

ildar170975 commented 2 years ago

when the RSSI zone changes

David, thank you for testing! In my case flickering happens even when the entity (input_boolean.test_boolean) does not change. Could you test with exactly my test code? You only need to create the input_boolean.test_boolean helper.

DavidFW1960 commented 2 years ago

I pasted your initial card from first post but it comes up completely blank. I used an input_boolean I already had. can you give me your raw lovelace to test for you?

ildar170975 commented 2 years ago

can you give me your raw lovelace to test for you?

Here it is:

  - title: '105'
    path: card-mod-flickering
    badges: []
    cards:
      - type: entities
        entities:
          - type: custom:multiple-entity-row
            entity: sun.sun
            name: simple row
            entities:
              - sun.sun
              - sun.sun
            card_mod:
              style: |
                hui-generic-entity-row {
                  color: orange;
                }
          - type: custom:mod-card
            card:
              type: custom:multiple-entity-row
              entity: sun.sun
              name: row inside mod-card
              entities:
                - sun.sun
                - sun.sun
            card_mod:
              style:
                multiple-entity-row$: |
                  hui-generic-entity-row {
                    color: orange;
                  }
          - type: section
            label: conditional styling
          - input_boolean.test_boolean
          - type: custom:multiple-entity-row
            entity: sun.sun
            name: simple row
            entities:
              - sun.sun
              - sun.sun
            card_mod:
              style: |
                hui-generic-entity-row {
                  {% if is_state('input_boolean.test_boolean','on') %}
                  color: orange;
                  {% endif %}
                }
          - type: custom:mod-card
            card:
              type: custom:multiple-entity-row
              entity: sun.sun
              name: row inside mod-card
              entities:
                - sun.sun
                - sun.sun
            card_mod:
              style:
                multiple-entity-row$: |
                  hui-generic-entity-row {
                    {% if is_state('input_boolean.test_boolean','on') %}
                    color: orange;
                    {% endif %}
                  }
      - 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;
                  }

The last "row inside mod-card" rows are flickering simultaneously (one on the 1st card, one on the 2nd card).

I pasted your initial card from first post but it comes up completely blank.

That is strange, do you have template-entity-row installed? The example below is based on this card and on the multiple-entity-row card (copy/paste from my 3rd post).

DavidFW1960 commented 2 years ago

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...

DavidFW1960 commented 2 years ago

actually now it only seems to be doing it when I am editing the dashboard. When I click the X in top left after saving it's stable 100%

DavidFW1960 commented 2 years ago

now it's flickering again when I come back to this dashboard from my normal one

ildar170975 commented 2 years ago

thomasloven commented 2 years ago

This should be better now.

ildar170975 commented 2 years ago

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

thomasloven / lovelace-card-mod

mod-card causes flickering if jinjia2 used for styling #165