Removing tap-delay from iOS WebViews

Have you even noticed in Mobile Safari (and UIWebViews, and Home screen web-apps) that when you tap a link or button there is a slight delay (300ms to be precise)?

The reason this exists is as an assistive mechanism for browsing the (very often) touch-hostile web. Interacting with anchors in websites where touch targets are not optimised for small screens and fat fingers can be a frustrating business and this delay/highlight is a method of messaging to the user which link they actually tapped.

That’s great and all, but what if you are a responsible developer and have accommodated for touch and designed large, tappable targets? Or if you are building a web-app that should look, feel and respond natively?

This behaviour becomes pretty frustrating in those cases, especially so in the case of a web-app where navigation & interaction is task based and helps maintain the user’s focus on the job at hand.

According to Jakob Nielsen:

1.0 second is about the limit for the user’s flow of thought to stay uninterrupted, even though the user will notice the delay. Normally, no special feedback is necessary during delays of more than 0.1 but less than 1.0 second, but the user does lose the feeling of operating directly on the data.”

So in a touch-friendly web-app we really can’t afford to throw an extra 300ms on top of the response time.

A (kinda) fix

I was wrong about removing the delay with just CSS — you actually cannot (which sucks). However, you can help give the impression of a more reactive interface by removing the visual tap cue.

Without using javascript there is no way to remove the delay completely, however there is a pretty trivial way of giving the perception of the UI being faster with just some CSS.

By default when a link is tapped UIWebViews render a garbage grey “tap-area” around the hit target, however this can be re-styled to be transparent.

In completely un-scientific testing (read: ‘IMO’) this definitely gives the impression of a more reactive UI by removing the “I tapped you and now you are just sitting there for 300ms with a janky grey thing hovering over you” experience.

-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-user-select: none;
-webkit-touch-callout: none;

Beware though that webkit-user-select does exactly what it says on the tin, if you apply that to your HTML tag then everything on your page is no longer selectable…probably not what you want.

To get around this I use this handy little bit of SCSS, which I the explicitly apply where removing delay makes sense (big UI buttons, navigation, etc). Using something like Modernizr allows you to only apply it to touch devices too.

html.touch %no-tap-delay {
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}