How to keep default browser behavior (zoom) on pinch with Hammerjs?

Question

I use Hammerjs for swiping and tapping. However as soon as I start using it on any element

var hammer = new Hammer(document.getElementById("square"));

the default browser's behavior for "pinch" gestures (zooming in or out) stops working.

Since I don't need any custom handling for pinch, I tried to disable the event recognizer like this:

hammer.get("pinch").set({enable: false});

No luck. The following jsfiddle illustrates the problem.

How can I keep my "swipe" handlers and let the browser do its job on pinch?

Answer 1

As it is pointed out in this question

{touchAction : "auto"}

is the way to go. Here is the corrected jsfiddle.

Answer 2

When you configure Hammer you need to define a touchAction eg.

      touchAction: "auto"

and in some cases an inputClass

      inputClass: Hammer.TouchInput

to keep the default browser behaviour as well.

eg with angular you can create such a config:

export class MyHammerConfig extends HammerGestureConfig {
  override buildHammer = (element: HTMLElement) => {
    const mc = new Hammer(element, {
      touchAction: "auto",
      inputClass: Hammer.TouchInput,
    });
    return mc;
  };

  override overrides = <never>{
    'swipe': {
      enable: true,
      direction: Hammer.DIRECTION_HORIZONTAL
    },
  }
}

and feed it in @NgModule providers:

  providers: [
    {
      provide: HAMMER_GESTURE_CONFIG,
      useClass: MyHammerConfig
    }
  ],