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

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:

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.


ANSWERS:


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:

I have NOT tested this on iOS however!



 MORE:


 ? angular2 and typescript error
 ? Angular2: hammerjs is not found
 ? Turn off Hammer JS events in Angular 2 to allow scrolling
 ? Angular Dragula and ng-repeat $index
 ? Dragula Drag only wanted elements
 ? angular2 Dragula css cursor grab/grabbing not working
 ? ng2-dragula group items in div
 ? Adding Dragular to Angular2 Application: document is not defined
 ? AOT error: require is not defined (caused by ng2-dragula library)
 ? Using ng2-dragula to drag and swap grid lists