The bar-card refresh with each change in value

[Veuchez]

Checklist:

• [x] I updated to the latest version available
• [x] I cleared the cache of my browser

Release with the issue:

Last working release (if known):

Browser and Operating System: Windows 10 (Edge, Chrome, Firefox) + Android (Home Assistant APP)

Description of problem:

The bar-card refresh with each change in value

This is my code:

  - type: 'custom:config-template-card'
    variables:
      - 'states[''sensor.smarther_boost_type_studio''].state'
    entities:
      - counter.smarther_studio_boost_remaining
    card:
      style: |
        ha-card {
          --ha-card-box-shadow: 'none'; 
          width: 20px;
          margin-left: 120px;
          border-radius: 0px
        }
        bar-card-backgroundbar {
         #margin-top: -5px;
         border-radius: 2.5px;
         margin-left: -11px;
         width: 10px;
         height: 243px;
         box-shadow: none;
        }
        bar-card-currentbar {
         #margin-top: -5px;
         border-radius: 2.5px;
         margin-left: -11px;
         width: 10px;
         height: 243px;
         box-shadow: none;
        }
      animation:
        state: 'off'
      color: >-
        ${vars[0] === '30' ? 'red' : vars[0] === '60' ? 'red' : vars[0] === '90'
        ? 'red' : 'grey'}
      columns: '5'
      direction: up
      entities:
        - entity: counter.smarther_studio_boost_remaining
          name: BOOST
      height: 10px
      limit_value: true
      max: >-
        ${vars[0] === '30' ? '1800' : vars[0] === '60' ? '3600' : vars[0] ===
        '90' ? '5400' : '0'}
      min: '0'
      positions:
        icon: 'off'
        indicator: 'off'
        minmax: 'off'
        name: 'off'
        value: 'off'
      type: 'custom:bar-card'

Javascript errors shown in the web inspector (if applicable):

Additional information:

[Veuchez]

@iantrich Do you have any idea how I can fix it? Thank you

[Veuchez]

I discovered that these shifts occur when I use car-mod and change the margins because every time you change a value the card and the css are reloaded causing these movements. What can I use instead of the code below to avoid this effect? style: | ha-card { --ha-card-box-shadow: 'none'; width: 20px; margin-left: 120px; border-radius: 0px }

[kamtschatka]

seems to be caused by the "transition" property. Use this:

style: |
  ha-card {
    --ha-card-box-shadow: 'none';
    width: 20px;
    margin-left: 120px;
    border-radius: 0px
    transition: none;
  }

[Veuchez]

seems to be caused by the "transition" property. Use this:

style: |
  ha-card {
    --ha-card-box-shadow: 'none';
    width: 20px;
    margin-left: 120px;
    border-radius: 0px
    transition: none;
  }

Wow thank you so much! You solved my problem!