mobile safari links retains focus after touch

Question

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

Answer 1

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.