Bug when hold action is actioned

[andyblac]

Checklist

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

Describe the bug after you have long tapped on a button the icon and labels moves position. This only happens in Saferi web browser, it does not happen if I use Chrome on macOS.

Version of the card Version: 4.1.1

To Reproduce This is the configuration I used:

  styles:
    label:
      - font-weight: "bold"
      - font-size: "90%"
      - border-radius: "50%"
      - position: "absolute"
      - right: "6%"
      - top: "0%"
      - height: "30%"
      - width: "30%"
      - margin-top: "7%"
      - margin-bottomt: "5px"
      - line-height: "24px"
      - color: "rgba(var(--color-theme),0.2)"
      - background-color: "rgba(var(--color-theme),0)"
    icon:
      - color: "rgba(var(--color-theme),0.2)"
    state:
      - justify-self: "start"
      - font-weight: "bold"
      - font-size: "12px"
      - filter: "opacity(40%)"
      - margin-left: "6px"
    img_cell:
      - background-color: "rgba(var(--color-theme),0.05)"
      - border-radius: "50%"
      - width: "100%"
      - height: "100%"
      - max-width: "none"
      - max-height: "none"
      - position: "absolute"
      - left: "60%"
      - top: "54%"
      - transform: "translate(-50%,-50%)"
      - margin-top: "15%"
      - margin-left: "-28%"
    card:
      - border-radius: "20px"
      - box-shadow: "var(--box-shadow)"
      - padding: "5px"

Screenshots before tap action in performed.

after long tap, and action has run.

after closing the more info popup

if you refresh the page the bottum returns to normal.

Expected behavior the button icon etc shoudl not move position.

Desktop (please complete the following information):

• Browser: [Safari]
• Version: [16.6]

Additional context if you need more info please just ask. I have attached the full yaml file

custom_card_andyblac_status_icon_only.yaml.zip

yaml to use template

          - type: "custom:button-card"
            name: Doors
            entity: sensor.number_of_doors_open
            template:
              - custom_card_andyblac_status_icon_only
            variables:
              ulm_card_status_color: blue
              ulm_card_status_badge_bg: true

[Mariusthvdb]

have to ask again, could you please provide a minimal config (without having to dl external files) so we can get an idea of what causes this. Just delete any line you have, and still reproduce the issue.

also, and this might be me, I cant spot the issue in your screenshots. please tighten that to only showing the issue?

also, tap action, long tap action, hold action.... which is it...? Please be concise.

[andyblac]

before hold_action (more info) is performed, how it should look.

after closing the more info popup

as you can see the button contents has shifted upwards, it should not have moved.

I will try to reduce code to the minimum till bug remains and report back.

[andyblac]

still happens with this code, it also happens with tap_action when set to more-info

- type: "custom:button-card"
  name: Doors
  entity: sensor.number_of_doors_open
  color: "var(--google-grey-500)"
  size: "45%"
  aspect_ratio: "1/1"
  show_icon: true
  show_label: false
  show_name: false
  tap_action:
    action: "more-info"
    entity: "[[[ return entity.entity_id; ]]]"
  hold_action:
    action: "more-info"
    entity: "[[[ return entity.entity_id; ]]]"
  styles:
    icon:
      - color: "rgba(var(--color-theme),0.2)"
    img_cell:
      - background-color: "rgba(var(--color-theme),0.05)"
      - border-radius: "50%"
      - width: "100%"
      - height: "100%"
      - max-width: "none"
      - max-height: "none"
      - position: "absolute"
      - left: "60%"
      - top: "54%"
      - transform: "translate(-50%,-50%)"
      - margin-top: "15%"
      - margin-left: "-28%"
    card:
      - border-radius: "15px"
      - box-shadow: "var(--box-shadow)"
      - padding: "5px"

[andyblac]

managed to reduce it down even further.

          - type: "custom:button-card"
            entity: sensor.number_of_doors_open
            size: "45%"
            aspect_ratio: "1/1"
            show_icon: true
            show_label: false
            show_name: false
            tap_action:
              action: "more-info"
              entity: "[[[ return entity.entity_id; ]]]"
            hold_action:
              action: "more-info"
              entity: "[[[ return entity.entity_id; ]]]"
            styles:
              img_cell:
                - background-color: "rgba(var(--color-theme),0.05)"
                - border-radius: "50%"
                - position: "absolute"
                - left: "-20%"
                - top: "20%"
              card:
                - border-radius: "15px"
                - box-shadow: "var(--box-shadow)"
                - padding: "5px"

still happens.

[Mariusthvdb]

this can probably be further reduced, leaving out all non 'size' elements, like color etc.

find out when this doe Not happen anymore... ;-) which is what we are looking for.

also, does this happen on all buttons you use, or only this one?

[andyblac]

got it down to

          - type: "custom:button-card"
            entity: sensor.number_of_doors_open
            # aspect_ratio: "1/1"
            show_icon: true
            show_label: false
            show_name: false
            tap_action:
              action: "more-info"
              entity: "[[[ return entity.entity_id; ]]]"
            styles:
              img_cell:
                - left: "-20%"
                - top: "20%"

still happends, although a smaller amount as card is no longer square. (1/1). It happens even if I create a new bashboard, with only this code in it.

[andyblac]

also, does this happen on all buttons you use, or only this one?

just this type where the imagecell, icon etc are shifted down and left, and when using the more-info popup, if i use navigation for example the bug does not occurre

[Mariusthvdb]

yes, I can reproduce, but its not 100% hit. every now and then, when returning from the more info, and the focus has returned to the card, it slides up. even with this:

    - type: custom:button-card
      entity: input_boolean.test
      aspect_ratio: 1
      show_icon: true
#       show_label: false
#       show_name: false
      tap_action:
        action: more-info
      styles:
        img_cell:
#           - left: '-20%'
          - top: '20%'

it also moves up the name.

this:

      styles:
        img_cell:
#           - left: '-20%'
          - top: 20%
          - justify-content: start

seems better, please give it a try?

[andyblac]

just the same here, moves up. i've tried 'start'. 'end' etc, none made a differance, same with position.

[Mariusthvdb]

this doesnt

- justify-content: start

[andyblac]

it does here, and yes all the contents of the button moves up, not just the img_cell. that why originally i gave you the full card.

small movement but it does move.

[Mariusthvdb]

ok then we have the bare minimum, and have to wait for Jerome to comment ;-)

[andyblac]

ok thanks. here a here a side by side

[andyblac]

it strange that it does not happens in Chrome browser.

[andyblac]

@RomRider any thoughts on this bug ?