iOS: Elements' hover state gets stuck after tapping them

Unlike desktop browsers, Safari on iOS does not handle the CSS :hover state well.

In particular, the hover state is applied when tapping an element, and is left applied until another element gets focus.

One solution is to not use :hover on iOS, but :active instead. The :active style is applied as one would expect - only while the finger is down during a tap, and removed when the tap is released.

Unfortunately, this requires some form of platform detection to distinguish the platforms/browsers and apply the appropriate CSS. From a quick look, though, it seems a CSS class safari is already applied when loading the page on iOS. However, I have not counter-checked if this class is also applied on macOS (in which case, a more fine-grained distinction would be needed).

This is easy to reproduce - just open the page on iOS and tap the “play” button - its hover state is not unapplied until you tap something else. (This also works in Chrome’s mobile/responsive device simulator. I’ve not tried it in Firefox’s inspector.) If desired, I can attach a short screen recording demonstrating the issue (a hint for where to host the video would be appreciated, GitHub doesn’t allow attaching video files directly; elsewise, I’d just zip the file).

I’d be happy to help fixing this (or starting to, depending on how complex the stylesheets are), but first I’d like to clarify what approach to platform/browser detection is used or wanted in this project.

Or if this is considered too cosmetic and not something that should be fixed at the moment?

[gustavneustadt]

You can use @media (hover:hover) now to only address devices that are able to hover over elements. hover CSS media feature

e.g.:

@media (hover:hover) {
   button:hover {
      background: green;
   }
}

[HackerSajeed]

### Use the following jQuery On Hover - Works on ios Hover Off - Doesn’t seem to work on iOS

$(document).ready(function(){ $(“.element”).hover(function(){ $(“p”).hide(); // for hover off }, function(){ $(“p”).show(); }) });