How disable the “hover” state of button for iPad Usage

I’m running Node-red in on a Synoligy NAS using Docker. I use it to show a domotica Dashboard on a iPad in the wall with data from my Homey (by emulating MQTT).


Its an old iPad 2 with iOS 9.36 (Safari 9). Almost everything is working fine except for the buttons. When I touch the buttons, they sometimes turn lightblue but do nothing (I also don’t see the slightly brighter circle animation on the button when I touch it and nothing happens). After some research I know what the problem is. The ipad is registering a mouse “hover” on the first touch, and a “click” on the second time I touch the button…

Now the question: What’s the simplest way to disable the hover state from the button? Is there a node that I can use with a piece of javascript to disable it?

Interesting thread about this here - https://stackoverflow.com/questions/2741816/is-it-possible-to-force-ignore-the-hover-pseudoclass-for-iphone-ipad-users
No idea which solution would work / is best / is practical... but hopefully has enough ideas to get you moving.

In my research I stumbled on that topic also. But I still don't have a clue how to fix this in a Node-red environment. To my (un-experienced) knowledge, I only can add CSS code inside the node-red environment (not change or remove something like ".hover" syntax). To be honest, I don't even know how to acces the files node-red is using (Synology nas + docker). And I dont think changing the base files is the smartest thing to do, it probably gets broken / overwritten with a update.

I hoped there is something simple like a (template) node with a piece of JavaScript I can add to disable it. I've also disabled scrolling this way.

Well yes - as long as it's CSS then you should be able to add it to a ui_template node - set to be part of the document "head" section - image
and override any of the CSS

Have you tried with an alternative browser? I know that they are supposed to use the same engine under the skin but maybe other browsers behave better?

I'm using a kiosk mode browser (removes adres bar and time / battery bar). But the standard safari behaves the same way. Bound to iOS9 (last iPad 2 version) there aren't a lot of alternatives.