iOS: Elements' hover state gets stuck after tapping them
See original GitHub issueUnlike 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?
Issue Analytics
- State:
- Created 6 years ago
- Reactions:2
- Comments:5 (2 by maintainers)
You can use
@media (hover:hover)
now to only address devices that are able to hover over elements.hover CSS media feature
e.g.:
### 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(); }) });