If Mobile Chrome's blue click marker is sticky ...

2014-02-07 | #android, #css, #solution

Mobile chrome marks click areas and elements with a blue overlay on touch. Normally these markers disappear after about 200ms, but there are cases where this fails, which means that you only get rid of the overlay/marker by clicking something else.

This is ugly and evil at the same time, since the marker exactly looks like a selection, but isn't and cannot be removed with removeAllRanges().

The reason seems to be the presence of transformations in :hover-descriptions. This seems to be a browser bug, where the marker isn't removed again from elements being animated. Since you can't disable :hover through javascript you'll have to exclude these definitions for touch environments, where they don't have any significant use anyways.

Let's assume you have some nav-links having a hover state, then you could exclude the transformations like this:

nav > a:hover {
  border-color: #666;
}
nav > a:not(.no-hover):hover {
  transform: scale(1.05);
  -webkit-transform: scale(1.05);
}

You'll still have to detect if there is a touch context and apply the "no-touch"-class to the links however.

Something like

if( 'ontouchstart' in window ){
  $('nav > a').addClass('no-hover');
}

should do the trick.