More-info anomaly on rightside iPhone screen

[Mariusthvdb]

Checklist

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

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

been seeing this for a while, but because of some dark background on my buttons, didn’t really see the issue. disabled the color, and then see it more clearly: on my iPhone, doing a more-info on hold action on buttons near the righthand side (where the scroll bar resides) of the screen results in odd behavior, described best as the full screen pulling back (a bit like a tsunami) and quickly restoring to the front again.

This seems to have to do with the grey circle (which appears when holding) touching the right side (scrollbar)

I must touch the buttons most left side, so this circle doesn’t touch the scrollbar and then things are alright. otoh, the closer one gets to the scrollbar, the more vehement the effect becomes Doesn't happen in a desktop browser as far as I can see

Version of the card Version: 3.1.1 To Reproduce This is the configuration I used:

  hold_action:
    action: more-info
    haptic: success

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

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]

iPhone 13 pro, iOS 13.3 Additional context Add any other context about the problem here.

[RomRider]

A recording of the screen when this happens would be nice. I don't own an iPhone to test unfortunately.

Thanks

[Mariusthvdb]

please let me if know this is clear enough

[RomRider]

I don't think this is something I can fix. It seems related to how hass displays the whole screen :/

[Mariusthvdb]

too bad, thanks for having a look though. Would this be something for the frontend team then? Since it only happens on the buttons I fear they wont accept an issue, Button card being a custom card...

btw, on 106.6 now and it is still there, just so you know

[RomRider]

It should happen with the default button also, would you mind trying please?

[Mariusthvdb]

yes it does! Ive never even used the core button card ;-)

on mobile it is even more difficult to see, because I dont get the grey circle when holding the button. I can see the effect happen though when holding the button near the right hand side

[RomRider]

It's because the circle overflows the screen size so it's expanded. I'm not sure how to fix that unfortunately... This is probably again some random CSS craziness 😅

[RomRider]

Does this still happen with the 0.110 and 3.3.5?

[matt8707]

https://github.com/home-assistant/frontend/issues/11320

[Mariusthvdb]

can be closed (not custom:button-card, and fixed in core HA)