New "pinch zoom" in Firefox breaks the camera

My Firefox just updated to 88.0.1 and it has this new “pinch zoom” feature. I think Firefox always had something similar, but they’ve updated it and made it really smooth. It’s actually super nice on static web pages for zooming smoothly in and out… but it completely breaks BabylonJS.

If you’re using Firefox, try any playground, like even something completely simple:
https://playground.babylonjs.com/#DWPQ9R#1

If you pinch zoom on the trackpad, the whole page zooms and the camera becomes pretty unusable. Anyone have an idea about how to intercept this new feature and make the camera behave better?

My HTML has the standard “disable zoom” tag:

<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' >

But this new feature seems to completely ignore it.

Adding @PolygonalSun

I’m not too familiar with this new feature so I’ll have to take a closer look and see what’s going on.

More information… This only seems to be a problem on Mac. I’m switching back and forth between my Windows machine and my Macbook and the pinch-zoom still works normally in Windows – it does exactly the same thing as pressing “CTRL +” or “CRTL -”. Apparently, the new smooth zoom thing was only added to Firefox on MacOS. Weird.

@pat_lvl17 did you figure a way to intercept it ??? I am pretty curious what we could do here ?

I haven’t looked into it, sorry. But it’s clearly possible because Google Maps (for example) behaves correctly when pinched in the new Firefox.

1 Like

let us try on our side and add a note in the doc, but it is so annoying we can not control it from js… per element

Actually to stop default pinchZoom you need to call e.preventDefault() in onWheel event :slight_smile:

In your example you call attachControl with noPreventDefault to true which implies we are not calling into it so pinch zoom native works.

This is only true cause you have wheel input listening but what if it is not the case and you still want to prevent native ? You could listen by yourself and call preventDefault() like here: Babylon.js Playground

1 Like