5 Steps to solve 300ms click latency on mobile devices

Translator: Jmouse

Most touch-based browser devices, when clicked, will have a 300MS event trigger wait time, the students who have done web app development should have encountered this situation, through the following 5 steps can easily fix this delay.

1. Don't get too tangled up in this
Whether you can accept this 300ms time delay is often dependent on your application and target audience, such as: if it is a content-based, and less-than-a-menu application, then the user spends more on reading than the events consumed on the menu, in which case 300ms is completely acceptable, and there is no 300ms The delayed experience is not much better. Analyze your application to determine whether you need to solve this problem, and make the right choice.

2. Disable zooming (Chrome and Firefox)
In the mobile version of Chrome and Firefox, if page scaling is disabled, the 300MS delay automatically disappears, with the following code:

<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 option does not work on safari and can also reduce the accessibility of users with visual or motion impairments.

3. Set viewport Device-width (Chrome 32+)
In Chrome 32+, if you set the width of the viewport to be less than or equal to the width of the physical device, the effect of disabling scaling is also reached.

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=3">

Note: The maximum zoom ratio here is not consistent with the values in the meta above, which is the key point.

4. Using pointer events (ie10+)

Microsoft has issued specific specifications for touch issues, such as: Pointerup events are not triggered when you roll the screen.

Here's a non-standard CSS touch Action property that allows you to remove a trigger delay for a particular element or entire document without disabling scaling:

a,, .{ -ms-touch-action: manipulation< Span class= "pun" >;  /* IE10 */ Touch-action : Manipulation;/* ie11+ */}         

5. Using Touchend event handling
Unlike click and touchstart,touchend without this 300ms delay, it's a real-time trigger, you can do it in WebGL or canvase games, but using touchend alone in a Web page is not necessarily a reliable one.

1. If the user triggers Touchstart and touchend between two different elements, click will not be triggered.

2, if the user triggered the Touchstart, but before the touchend is a long touchmove scrolling, then click will not be triggered.

3, in the site should retain the Click event to be compatible with those non-touch devices, which is you have to consider the event of a recurring trigger problem.

Enter content here some of our solutions have been encapsulated by our peers:

1, Fastclick to the FT laboratory of a plug-in, only 10kb, but can solve the above 2-4 steps.

2, Tappy from filament Group, only 1kb, conceptually similar to the above pointer event.

Issue: When you bind these events for multiple elements, there is a risk of performance loss.

Is there a perfect solution?

Whether the need to solve 300ms is in its own judgment, 300MS is designed to have a specific purpose, the above meta attribute is set, in Chrome and Firefox can work, I hope other vendors can provide such support as soon as possible. Touch-action:manipulation This CSS property can minimize the risk, although only Microsoft support now, but as a part of the specification and html5test, so perhaps we do not have to wait too long.

Transferred from: http://www.jmouse.cn/?p=524

5 Steps to solve 300ms click latency on mobile devices