Common-voice: iOS: Elements' hover state gets stuck after tapping them

[nevik]

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?

[mikehenrty]

I agree with your assessment @nevik and thank you for the detail.

We do have a way of detecting if we are in Safari, and if we are in the iOS native app, but not Safari mobile browser. For the iOS native app, we add a class of ios to the body element. https://github.com/mozilla/voice-web/blob/4a3742e642a1a5e092037dd80d14fa66dedd80cf/web/src/lib/app.tsx#L100

For now, I think fixing this for the iOS native app would be enough, so you can use the .ios class to fix this. But if you are really concerned about this, we could add a user agent string detection function into `web/src/lib/utility.ts' to check for mobile safari.

[nevik]

Thanks for the info @mikehenrty!

I’ll probably take a stab at this on the weekend :)

[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();
})
});

[SahilMepani]

We can use mordernizr to check whether the device supports touchevents and no-touchevents and accordingly we can set hover and active styles.

[gvstavnev]

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

e.g.:

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