Route buttons flash a few times before navigating on iOS, slowing down the navigation

[andeart]

Describe the bug
Navbar buttons on mobile are slow and flash a few times before actually changing the route.

To Reproduce

1. Create a dashboard with at least 2 views (neither must be a sub-view).
2. Add the default Navbar card.
3. Update the navigation routes to your 2 views.
4. On a mobile device, tap on either nav button.
5. Observe flashes on navbar icons and slowness for new page to load. Note that this bug only occurs on mobile, desktop behaviour is snappy and instant.

Expected behavior
Tapping on navbar button must navigate to the tapped route instantly, similarly to tapping the button in the default top header of the dashboard.

Screenshots
Recorded MP4 of bug (hosted on Google Drive, let me know if you'd like it elsewhere please): https://drive.google.com/file/d/1v0lAHWtaqumtlInF0lpEsSFp2TAQR3k7/view?usp=drivesdk

Information:

• OS: iOS
• Browser: official Home Assistant iOS app
• Navbar-card version: v1.3.0
• HA version: 2026.2.2

navbar-card yaml configuration

type: custom:navbar-card
routes:
  - icon: mdi:home
    label: Home
    url: /test-260214/0
  - icon: mdi:test-tube
    label: ""
    url: /test-260214/test-2

Thanks so much for this wonderful mod. Let me know if I can help debug or share further info please. Cheers!

[jarivanb]

Yes! Same problem here!

[andeart]

As a data point, I got the v1.4.0 update yesterday and the bug still occurs on it.

[joseluis9595]

Hi! Could anyone confirm whether this started happening after either an iOS update or a navbar-card update? I don’t have an iPhone with me right now, so I’d like to know whether this was introduced in a previous version of the card or if it can be related to the iOS version itself.

[andeart]

@joseluis9595 Thanks for taking a look at this! I only started using Navbar in the last couple weeks, so I unfortunately don't have much data to go off for when this may have been introduced, sorry. Hoping someone else responds with that info here.

If it helps debug this further, here's another look at the same bug, but this time I'm holding each button for about half a second (to let the Material ripple effect complete filling the button) before I let go to navigate. I wanted to check if the ripple effect was colliding with the colour or such, but it appears the bug persists even if I wait until after that effect. You can see the blue highlight flash a couple times in this video: https://drive.google.com/file/d/1orIsjI2EDKCr9WQ_km_YvenEHHqhxTxY/view?usp=sharing

Let me know if there's anything else I can help to debug please. Cheers!

[andeart]

@joseluis9595 I was dabbling with some other parts of my dashboard and I ran into a discovery that might help with this. The main issue appears to be stemming from the ripple effect and how it is reset/transformed on touch devices (iOS at least, if not Android).

Here's a video where I removed the default colour-mix background of the buttons and set custom values for the ripple colours to demonstrate it better: https://drive.google.com/file/d/16JbNialFE1MZVBSsZiaWq8aSg3My1l87/view?usp=sharing

To be clear, these are the specific colour vars I overrode for that video:

styles: |
  .navbar.mobile .button {
    # to hide the default background since it doesn't seem to be part of the problem
    background: transparent;
    box-shadow: none !important;
  }
  .navbar.mobile .button ha-ripple {
    --md-ripple-hover-color: rgba(0, 255, 0, 1) !important;
    --md-ripple-pressed-color: rgba(255, 0, 0, 1) !important;
    --md-ripple-hover-opacity: 1 !important;
    --md-ripple-pressed-opacity: 1 !important;
  }

I’m only doing a quick single tap on each nav button, yet the ripple element appears to glitch a few times with each route change. Some other info:

• I can't reproduce this on an emulator, only on my physical iPhone.
• These test pages are very simple, so not too many shadow DOM levels being populated (though it's still a View, so there are probably a few levels being populated by default).

Hope this helps! Thanks again for this amazing card.

[joseluis9595]

Thank you for the thorough report @andeart !! I might be able to get my hands on an iPhone tomorrow, hopefully I can replicate the bug (and fix it). Both md-ripple and ha-ripple have honestly been a bit of a PITA since I introduced them to the card, so it can either be a bug with one of them, or some issue with event handling + navigating + animating.