5 Ways to Prevent the 300ms Click Delay on Mobile Devices

Share this article

Most touch-based mobile browsers wait 300ms between your tap on the screen and the browser firing the appropriate handler for that event. It was implemented because you could be double-tapping to zoom the page to full width. Therefore, the browser waits for a third of a second — if you don’t tap again, the “click” is activated. The delay was a sensible precaution in the days before Responsive Web Design and multi-touch pinch zooming. Unfortunately, it’s now one of the primary reasons users consider web applications to be slower and less capable than native alternatives. So what can we do about the delay?

1. Don’t Fret About it

Whether the 300ms delay is a problem will largely depend on your application and target audience. For example, a content-only website with a standard navigation menu is unlikely to be adversely affected because users spend more time reading text than interacting with controls.

2. Disable Zooming (Chrome and Firefox)

Chrome and Firefox on Android will not wait for 300ms if zooming has been disabled using the following viewport setting in your HTML head:
<meta name="viewport" content="width=device-width, user-scalable=no">
or
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
However, this solution fails on Safari and raises several accessibility concerns for those with visual or motor impairments. Fortunately, the vendors have begun to address that issue…

3. Set the viewport to the device-width (Chrome 32+)

In Chrome 32, setting the viewport width to anything less than or equal to the device-width will disable the double-tap zooming. You probably already have an appropriate setting in the HTML head of your responsive website, e.g.
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=3">

4. Use PointerEvents (IE10+)

Microsoft has solved many touch-based issues in the PointerEvents specification
. For example, the pointerup event won’t be fired if the user is scrolling the page. There is also a non-standard CSS touch-action property which allows you to remove the delay on specific elements or the whole document without disabling pinch-zooming:
a, button, .myelements
{
	-ms-touch-action: manipulation;	/* IE10  */
	touch-action: manipulation;		/* IE11+ */
}
I hope other vendors adopt PointerEvents but don’t hold your breath.

5. Implement touchend Event Handlers

Unlike click and touchstart, touchend events are fired instantly without a 300ms delay. This may be practical if you’re developing a touch-only WebGL or canvas-based game, however, you cannot rely solely on touchend in standard web pages since:
  1. A user firing touchstart on a different element to touchend should not fire the click.
  2. A user firing touchstart then a reasonably large touchmove before the touchend event is scrolling — a click should not be fired.
  3. You still require standard click handlers for those using non-touch devices — but be wary about firing the same event twice.
There’s a lot to contend with but the hard work’s been done for us:
  • FastClick from FT Labs attaches appropriate listeners on mobile browsers when they’re required, i.e. solutions 2 to 4 above have not been used. The script compresses to around 10Kb.
  • Tappy! from the Filament Group is a normalized tap event library, similar in concept to PointerEvents, which compresses to 1Kb.
Be warned that adding event handlers to multiple elements will have a negative impact on performance. It may be worse than the 300ms delay problem you’re attempting to solve.

An Optimal Solution?

The situation is a mess and it’s not easy for developers to build a cross-browser solution. I’m not convinced it’s something we need to solve in every application since it’s a browser-specific policy which should be addressed by vendors. Setting the viewport width to device-width is the easiest option since you’ve probably done it already. It won’t work until Chrome 32 is released but Opera, Firefox and possibly IE will follow. I’d hope to see it in Webkit but it could take several years before the many millions of iPhone and iPad users receive it. There’s little harm adding touch-action: manipulation; properties to CSS — it’ll degrade gracefully. Had PointerEvents been devised by anyone other than Microsoft, I’m sure the remaining vendors would have followed immediately. It is a W3C specification and part of the HTML5test so perhaps we won’t need to wait too much longer. If you’re only concerned about a handful of links or buttons, your own custom touchend handlers may be effective. For everything else, it’s worth considering FastClick.

Frequently Asked Questions (FAQs) on Preventing 300ms Click Delay on Mobile Devices

What is the 300ms click delay on mobile devices?

The 300ms click delay is a built-in delay in mobile browsers that was originally designed to handle the double-tap-to-zoom function. However, this delay can cause a noticeable lag in the responsiveness of a web page, particularly for fast-paced applications or games. This delay can be frustrating for users and can negatively impact the user experience.

How can I prevent the 300ms click delay on my mobile device?

There are several ways to prevent the 300ms click delay on mobile devices. One of the most effective methods is to use a viewport meta tag with the width set to device-width. This tells the browser that the page is optimized for mobile and it doesn’t need to wait for potential double-tap zooms. Other methods include using CSS touch-action property, fast click libraries, or Pointer Events.

What is the impact of the 300ms click delay on user experience?

The 300ms click delay can significantly impact the user experience, especially in applications that require quick responses, such as games or interactive web applications. The delay can make the application feel sluggish and unresponsive, leading to user frustration and potentially causing users to abandon the application.

Can the 300ms click delay be eliminated on all mobile browsers?

Most modern mobile browsers have eliminated the 300ms click delay when the viewport meta tag is set to width=device-width. However, some older browsers may still have this delay. In these cases, other methods such as using CSS touch-action property, fast click libraries, or Pointer Events can be used to eliminate the delay.

What is the CSS touch-action property and how does it help in preventing the 300ms click delay?

The CSS touch-action property allows you to specify how touch input is handled by the browser. By setting the touch-action property to manipulation, the browser will only allow panning and pinching gestures, and will not wait for a potential double-tap gesture, thus eliminating the 300ms delay.

What are fast click libraries and how do they prevent the 300ms click delay?

Fast click libraries are JavaScript libraries that are designed to eliminate the 300ms click delay on touch devices. They work by attaching a listener to the body of the document that listens for touchstart events and then fires a synthetic click event immediately, bypassing the 300ms delay.

What are Pointer Events and how do they help in preventing the 300ms click delay?

Pointer Events are a unified API for handling all input events, including mouse, touch, and pen events. By using Pointer Events, you can handle all input events in a consistent manner, and eliminate the 300ms click delay by handling the pointerdown event, which fires immediately when the user touches the screen.

How does the viewport meta tag prevent the 300ms click delay?

The viewport meta tag tells the browser how to control the page’s dimensions and scaling. By setting the width to device-width, you’re telling the browser that the page is optimized for mobile and it doesn’t need to wait for potential double-tap zooms, thus eliminating the 300ms delay.

Are there any drawbacks to using these methods to prevent the 300ms click delay?

While these methods can effectively eliminate the 300ms click delay, they may have some drawbacks. For example, using fast click libraries or Pointer Events may increase the complexity of your code and could potentially introduce new bugs. Also, setting the viewport meta tag to width=device-width may not be suitable for all websites, particularly those that are not designed for mobile.

How can I test if the 300ms click delay has been successfully eliminated from my mobile device?

You can test the responsiveness of your mobile device by using online tools such as Google’s PageSpeed Insights or by manually testing the responsiveness of your application. If the application responds immediately to your touch inputs without any noticeable delay, then the 300ms click delay has been successfully eliminated.

Craig BucklerCraig Buckler
View Author

Craig is a freelance UK web consultant who built his first page for IE2.0 in 1995. Since that time he's been advocating standards, accessibility, and best-practice HTML5 techniques. He's created enterprise specifications, websites and online applications for companies and organisations including the UK Parliament, the European Parliament, the Department of Energy & Climate Change, Microsoft, and more. He's written more than 1,000 articles for SitePoint and you can find him @craigbuckler.

HTML5 Tutorials & Articlesmobilemobile web apps
Share this article
Read Next
Get the freshest news and resources for developers, designers and digital creators in your inbox each week