Clicking a button name also sends a click to the same location of the navigation url

[timvdsm]

Describe the bug
I use in my overview dashboard a button name card to navigate to my subview "lights" where I putted all my lights. However if I click this button in my overview dashboard using the mobile app, it seems it also send a click at exact the same location to the navigated url. As everytime when I click it, it activates the corresponding light (same location on the screen). It's very strange. And it seems only to do this when using the mobile client (iphone), not when using a webbrowser of my mac.

To Reproduce
Steps to reproduce the behavior:

1. Go to 'my general overview dashboard'
2. Click on 'the button name "Lichten"'
3. The navigation url "lights" opens (subview)
4. It activates the light of the subview at exact the same location of the button name.

Expected behavior
When clicking a button name to navigate to a sub view, nothing should be activated on the subview itself

Screenshots
Overview dashboard - click button name "Lichten"

This opens the navigation url "lights" which is a subview with all my lights on it. But it also seems to click on exact the same location of the subview and activates the light which is placed at that location. I changed the position of the lights of the subview and it activated the light which is at that location of the screen. SO changing the position of the lights of the subview will activate another light automatically.

YAML

type: custom:bubble-card
card_type: button
button_type: name
name: Lichten
icon: mdi:lightbulb-group
button_action:
  tap_action:
    action: navigate
    navigation_path: lights
tap_action:
  action: navigate
  navigation_path: lights
layout_options:
  grid_columns: 2
  grid_rows: 1

Informations (please complete the following information):

• OS: [e.g. iOS] ios 18.1 (but was present before)
• Browser/App: safari
• Bubble Card version: 2.2.4
• Home Assistant version: [e.g. 2024.10.4

Thank you! 🍻

[Clooos]

Hi! Can you try to use some other cards to see if there is the same behavior? I just want to be sure that this issue is not from Home Assistant itself.

[timvdsm]

Hi @Clooos many thanks for taking a look at this.

Indeed, I did a test with another custom:mushroom-template-card, where I don't see that behavior. The config I used (the card mod is just to give it the same look and feel as a bubble card :-) ):

type: custom:mushroom-template-card
primary: Lichten
secondary: ""
icon: mdi:lightbulb-group
tap_action:
  action: navigate
  navigation_path: lights
card_mod:
  style:
    mushroom-shape-icon$: |
      .shape {
        background: white !important;
        --icon-symbol-size: 24px;
        --icon-size: 38px;
        --icon-color: grey;
        margin: -3px;
      }             
    .: |
      ha-card {             
        height: 50px !important;
        border: none;
        border-radius: 32px !important;
        background-color: var(--background-color-2,var(--secondary-background-color));
        color: var(--primary-text-color);
        } 
    mushroom-state-info$: |
      .container {
       --card-secondary-font-size: 20px;
       --card-primary-font-size: 13px;
       --card-primary-font-weight: 600;
       margin: +3px;
      }

When I add the bubble card button again, the behavior becomes back. It is very strange and I only see it on my mobile. I have made 2 small movies. The upper "Lichten" button is the mushroom template card, the downstairs "Lichten" is the bubble card button.

Bubble card button (downstairs "Lichten" button):

https://github.com/user-attachments/assets/c1d4f094-c94f-49ec-9a69-ff97d71f7680

Mushroom template card ("upper "Lichten" button):

https://github.com/user-attachments/assets/fd4d019c-7441-43b4-9ea4-0060c070e2e3