animated icon not centered on mobile

[Mariusthvdb]

Checklist

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

Describe the bug A clear and concise description of what the bug is.

somehow an animated icon is way off center when displayed in the iOS app. Maybe it's because of the size of the button (always use grid: 4 aspect_ratio: 1 buttons?

Version of the card Version: 400-b8 To Reproduce This is the configuration I used:

        - type: custom:button-card
          template:
            - button_switch
            - spin

          entity: switch.vijverpomp_links
          triggers_update: sensor.vijverpomp_links_actueel
          name: Pomp left
          icon: mdi:turbine

# spin template:

spin:
  state:
    - value: 'on'
      id: state-on
      spin: true

# might be relevant part of the bigger template used:
styles_img_cell:
  styles:
    img_cell:
      - align-items: start
      - justify-content: start

Screenshots If applicable, add screenshots to help explain your problem.

https://github.com/custom-cards/button-card/assets/33354141/bc6c106f-bfda-45cf-98f7-e256bf12e73a

https://github.com/custom-cards/button-card/assets/33354141/711efeed-1f0c-4148-a7d1-4c106b6a876a

compared to desktop, which seems rather ok..

Expected behavior A clear and concise description of what you expected to happen.

Desktop (please complete the following information):

• Browser [e.g. chrome, safari]
• Version [e.g. 22]

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context

This has always been around in some form, but now is showing rather unacceptably off-center...

as I have picked the most centered icon in the library (...), we have to assume it's not that, and must be a matter of the card handling css in some way?

[RomRider]

Nothing I can do about that, I think. Seems like the icon is not "centered". Is it a mdi icon?

[Mariusthvdb]

yes it is. what I dont get is why it is near perfect on desktop, but so off on app mobile

[Mariusthvdb]

Ive found tha final template causing this:

state_display_switch:
  template: styles_state_default

#   show_state: true

  state_display: >
    [[[ var id = entity.entity_id.split('.')[1];
        var power = states['sensor.' + id + '_actueel'].state;
        var fakestate = `<span style="color: var(--active-color);"> ${localize(entity)}</span>`;
        var fakestateOff = `<span style="color: var(--active-background-color);"> ${localize(entity)}</span>`;
        var powerState = `<span style="color: var(--power-color);"> ${power} W</span>`;
        return (entity.state === 'on') ? fakestate +': ' + powerState :
        (entity.state === 'off' && power > 0) ? fakestateOff +': ' + powerState : null; ]]]

styles_state_default:
  template: styles_state_default_auto
  state:
    - value: 'on'
      styles:
        icon:
          - color: var(--icon-color-on)
      id: state-on

so if I comment the show_state: true, the icon is fixed as can be....

ofc this only stop the state_display template from showing, so I need to dig deeper. At least this is a step closer to a solution... Not to any understanding why this would only show on mobile, other than it maybe the smaller button canvas.

[RomRider]

So I found why but I can't do anything about it as I can style the shadow root of the ha-state-icon (which wraps a ha-icon inside...)

Maybe you can try with card-mod like that:

            card_mod:
              style:
                '#container #img-cell ha-state-icon#icon$': |
                  ha-icon {
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                  }

[RomRider]

Even better it seems... (didn't test the side effects...)

            card_mod:
              style:
                '#container #img-cell ha-state-icon#icon$':
                  ha-icon$: |
                    ha-svg-icon {
                      display: inline;
                    }

[RomRider]

And without card-mod... this has drawbacks (it overflows sometimes), like the previous one which does the same thing but this one is faster

styles:
  icon:
    - --ha-icon-display: inline

[Mariusthvdb]

And without card-mod... this has drawbacks (it overflows sometimes), like the previous one which does the same thing but this one is faster

styles:

  icon:

    - --ha-icon-display: inline

That is already much better, still a small off center deviation but at least it is useable

https://github.com/custom-cards/button-card/assets/33354141/ace9115f-9323-49cf-ab78-f60f83dda764

I didn't give any of the others a test yet, as this

styles_state_default:
  template: styles_state_default_auto
  state:
    - value: 'on'
      styles:
        icon:
          - color: var(--icon-color-on)
          - --ha-icon-display: inline
      id: state-on

seems the cleanest way of applying the style, thanks for this

(nb this is still on b10)

for reference, have a look at this:

which I believe to have worsened also. I have always seen off center behavior, but don't recall it being this bad. Yaml card_mod for that:

    card_mod:
      style:
        div#wrapper: |
          state-badge {
            {% if is_state(config.entity,'on') %}
            animation: rotation 2s linear infinite, colorize 5s linear forwards 1;
            {% endif %}
          }
          @keyframes rotation {
            0% {
              transform: rotate(0deg);
            }
            100% {
              transform: rotate(360deg);
            }
          }

when applying the inline mode to that:

          @keyframes rotation {
            0% {
              transform: rotate(0deg);
              --ha-icon-display: inline;
            }
            100% {
              transform: rotate(360deg);
              --ha-icon-display: inline;
            }
          }

look what happens:

suddenly it centers better (is it perfect..?) and its way bigger!

we must add this to our default toolbox. Maybe even add it as default to the spin?

all of this is a bit of a mystery to me still because I also have this same animation in a Glance card (look closely and you'll see they are spinning)

and that is without anything further..

card_mod:
  style: |
    .box ha-state-icon {line-height: 0px;}
    .box div:nth-child(3) div:nth-of-type(1) ha-icon-button ha-state-icon {
      {% if is_state('switch.vijverpomp_links','on') %}
        animation: rotation 3s linear infinite, colorize 3s linear forwards 1;
      {% endif %}
    }
    .box div:nth-child(3) div:nth-of-type(2) ha-icon-button ha-state-icon {
      {% if is_state('switch.vijverpomp_rechts','on') %}
        animation: rotation 3s linear infinite, colorize 3s linear forwards 1;
      {% endif %}
    }

    @keyframes rotation {
     0% {transform: rotate(0deg);}
      100% {transform: rotate(360deg);}
    }

this btw is the result of a longer struggle in the card_mod topic, have to look top why we settled for this.

edit: found it:

take out the

    .box ha-state-icon {line-height: 0px;}

and shiver:

take that back to the button-card template:

styles_state_default:
  template: styles_state_default_auto
  state:
    - value: 'on'
      styles:
        icon:
          - color: var(--icon-color-on)
#           - --ha-icon-display: inline
          - line-height: 0px
      id: state-on

yields the same effect: better, but still a tiny swirl on mobile...

however, use that in the template-entity-row card mod:

          @keyframes rotation {
            0% {
              transform: rotate(0deg);
              line-height: 0px;
            }
            100% {
              transform: rotate(360deg);
              line-height: 0px;
            }

and be surprised:

all in all, icon animation is a touchy subject, and some default styling advise on this would be helpful in the documentation ;-)

[RomRider]

TBH honnest, I think they've changed something in HA when they switched to ha-state-icon and I'm so bad with CSS that I don't really know how to fix that properly within button-card 😞 I'd need a CSS expert to help me fix the whole button-card styling I think as it's quite hacky...

[Mariusthvdb]

if this is as good as it will get, lets close for now. thanks for your suggestions that did indeed make it better.