hammer.js exhibits pinch lag when changing pinch direction (tested on Android)

Question

I've noticed when using Hammer-time.js for zoom events that there is a noticeable lag in the pinch zoom event if you go from pinch in to pinch out (or vice versa) without taking your fingers off the screen.

I have only tested this on Android as I only have an Android phone and tablet available.

Often the zoom will continue to go in before turning around and going out again even though the user has reversed the action. Its obvious when zooming into something like a photograph using this method.

The jQuery code I am using is as simple as I can make it for the demonstration:

var myElement = document.getElementById('zoom_div');
var hammertime = new Hammer(myElement);
hammertime.get('pinch').set({ enable: true });

hammertime.on("pinchin", onpinchin).on("pinchout", onpinchout);

function onpinchin(e) {
    document.getElementById("zoom_div").innerHTML = "IN";
}

function onpinchout(e) {
    document.getElementById("zoom_div").innerHTML = "OUT";
}

See the following example:

https://jsfiddle.net/single_entity/xqfufoqo/

Pinch in and out without taking your fingers off the screen, and you'll see the reaction to the opposite direction is often lagging significantly.

Answer 1

The solution to my problem is to remove Hammer.js for my pinch event handling, and instead implement my own pinch handler. I continue to use Hammer for other touch events.

//Non - hammer detection
$('#zoom_div_manual').on('touchstart', function(e){
    trigger_start = true;
});

$('#zoom_div_manual').on('touchmove', function(e){
    pinchMove(e);
});

$('#zoom_div_manual').on('touchend', function(e){
    if(scaling) {
    trigger_start = false;
    }
});

var last_pinch = 0;

function pinchMove(e) {
  e.preventDefault();

  var dist =Math.sqrt((e.originalEvent.touches[0].pageX-e.originalEvent.touches[1].pageX) * (e.originalEvent.touches[0].pageX-e.originalEvent.touches[1].pageX)+(e.originalEvent.touches[0].pageY-e.originalEvent.touches[1].pageY) * (e.originalEvent.touches[0].pageY-e.originalEvent.touches[1].pageY));

  if(dist => last_pinch)document.getElementById("zoom_div_manual").innerHTML = "IN";
  if(dist < last_pinch)document.getElementById("zoom_div_manual").innerHTML = "OUT";

  last_pinch = dist;

}

The following is demonstrated in the green box in the following jsfiddle. I have included the Hammer version for comparison above it. You will see there is no lag compared to the Hammer version:

https://jsfiddle.net/single_entity/xqfufoqo/

I have NOT tested this on iOS however!

Answer 2

So I was facing the same issue. I searched a lot and I found a solution, at least for my problem. Based in that code from munrocket: https://codepen.io/munrocket/pen/dayZJg . You need to save the scale it will be adjusted. I hope it helped.

//adjustScale = 1;
//scale = 1

hammertime.on('pinchmove',function(e){
 scale = adjustScale * ev.scale;

 //do another things you want to

}
hammertime.on('pinchend',function(e){
  adjustScale = scale;
}