mobile safari links retains focus after touch

jquery css ipad mobile-safari

35,107

Solution 1

Hover is a CSS pseudo class designed to work with a pointer not so much with touch events. You would normally want to avoid the use of hover altogether since it makes no sense on mobile. One of the easiest ways to deal with this is by placing your hover CSS inside a media query. You can do this by targeting tablets or desktop screens, here are the two solutions:

1- Targeting iPads:

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
    RE.no-touch .my-element:hover {
         /* in here you cancel all hover styles you applied for desktop */ 
    }
}

2- Targeting desktops:

@media only screen 
and (min-width : 1224px) {
    RE.no-touch .my-element:hover {
         /* in here you apply hover styles that will only work on desktop */ 
    }
}

Either way is valid. You can change the values of min and max width if you notice that the CSS is being triggered incorrectly in certain devices.

Solution 2

If you're using Modernizr, the no-touch class will be added to the root html element for non-touch devices. Then you can do this:

a.myclass {
   color:#999;
}

.no-touch a.myclass:hover,
a.myclass:active {
   color:#ccc;
}

Solution 3

This is an old post but I was struggling with this today in 2019, and I find this clean solution and I want to share with all of you.

<a href="#">Try hovering over me!</a>

@media (any-hover: hover) {
  a:hover {
    background: yellow;
  }
}

Basically what are we doing here is using hover in any device with pointer mechanism. Nowadays there is softwares with html readers for a better accessibility of the site and should not be a good idea, deactivate :hover for all mobile devices. Just to be clear, any device without pointing mechanism the hover will not take effect, otherwise we applied the :hover style.

Solution 4

This is how I fixed it for my list with a hover:

CSS:

ul {background-color:#f3f3f3;}
li:hover {background-color: #e7e7e7}

jQuery:

$(document).ready(function () {
    $('li').on('touchstart', function () { $(this).css('background-color', ''); });
    $('li').on('touchend', function () { $(this).css('background-color', 'inherit'); });
});

And a fix for hover on back buton navigation...

<body onunload="$('a').blur();">

$(window).unload( function () { $('a').blur(); } );

For the uninitiated, the unload event occurs right before the browser leaves the page. By blurring all of the links in the page on unload, I was able to un-stick the hover state. Returning to the original page using the back button shows the clicked link in the default state.

Unfortunately, an onclick event doesn't seem to trigger the unload, but a refresh does in iOS 5?!

Stuck On :hover - http://www.aaronpinero.com/articulated/2011/05/28/stuck-on-hover/ Use jQuery to replace - http://www.nerdboy.co.uk/2009/01/use-jquery-to-replace-body-onunload/

Solution 5

I ran across this issue as well. My problem was on the iPad, if I tapped an anchor and scrolled slightly, a click event did not fire but the element would retain the hover state CSS. My belief is that the iPad was actually retaining a focus state and applying the :hover CSS styles in an effort to simulate the desktop experience.

A non-JS and practical workaround is to not deliver hover styles to touch devices if there is not a need for them. Touch devices do not have a "real" hover state, however it appears hover is simulated when an element is focused or tapped-and-scrolled upon.

So with Modernizr.js loaded, I moved my hover styles into the scope of .no-touch -

i.e.

/* Only deliver hover styles to non-touch devices */
.no-touch .my-element:hover {
  /* hover styles */
}

Then, when the element is clicked I am toggling an active class on it.

.my-element.active {
  /* active styles */
}

The only negative takeaway is you do not get a "being tapped state". I have yet to investigate a solution for that as it's not really important for my apps.

View more solutions

35,107

Author by

d2burke

[email protected] @d2burke I'm a Software Engineer & iOS Developer for Dominion Enterprises, based in Norfolk, VA.

Updated on August 09, 2020

Comments

d2burke over 3 years

My navigation is quite simple. I have a hover state which adds a border and a transparent gradient png background to some text, and an additional class which, when added by jQuery, adds color behind that transparent image.

If you click to toggle the class in a web browser you'll see the color come in and out, but the background image stays if you never move the mouse away from the button. This is expected behavior.

My problem is that when using an iPad, the touch seems to retain the hover state and the :hover properties never go away unless you click another button, in which case the persistent :hover properties are added to that button until another is pressed.

I can't imagine that I am the first with this problem, but searches haven't turned anything up.

Help?

Normal - Hover - Active (via addClass() )