Firefox disable browser zoom but allow element zoo

Question

I've got a site running aimed at touchscreens running Firefox (very specific I know, but it will hopefully help with a solution) On the page in question, I've got a d3 map that I'm trying to enable pinch zooming for, however any pinch gesture is causing Firefox to set the zoom for the whole page. Is there a way to prevent the page zooming and only allow the map to zoom?

It's not an issue if I have to modify Firefox config settings but I'd prefer to avoid it and rely entirely on javascript if possible.

Thank you in advance

Answer 1

You might be able to do this using the viewport metatag and Hammer.js

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

This will disable the default browser zoom.

---

You can then use Hammer.js to capture gesture events which you will then pass to your D3.js code to zoom your map