Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

iOS: Elements' hover state gets stuck after tapping them

See original GitHub issue

Issue Description

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?

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Reactions:2
  • Comments:5 (2 by maintainers)

github_iconTop GitHub Comments

gustavneustadtcommented, Oct 29, 2019

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


@media (hover:hover) {
   button:hover {
      background: green;
HackerSajeedcommented, Oct 2, 2018

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

Read more comments on GitHub >

github_iconTop Results From Across the Web

How to prevent sticky hover effects for buttons on touch devices
These buttons have a hover state, they turn blue. On touch devices, like iPad, the hover state is sticky, so the button stays...
Read more >
Solving Sticky Hover States with @media (hover - CSS-Tricks
If you tap on something that has a :hover state but you don't leave the page then, on a mobile device, there is...
Read more >
hover is sticky on iOS, even on touch-friendly webpages
However, :hover stickiness causes the buttons on these webpages to get stuck in a hovered/selected state after a tap on them has completed, ......
Read more >
Fixing the iPhone CSS hover problem on iOS
1. Add a onclick attribute to the body · 2. Add a ontouchmove attribute to the html element.
Read more >
4 novel ways to deal with sticky :hover effects on mobile devices
While this is overall a good thing, it leads to what's known as the "sticky hover" issue on these devices, where the :hover...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found