Pixi.js: Prevent browser page zoom pinch gesture on desktop

[jasonsturges]

Posted in html5 game forum here - haven't received a response, but I believe this might be a bug.

Having an issue on desktop where Pixi interaction manager doesn't appear to prevent default capturing pinch gestures.

This is especially problematic with Pixi Viewport, where pinch zoom gesture is getting caught by the browser; therefore, zooming the browser's viewport (entire DOM).

Above, the pinch-zoom gesture is still picked up by the browser window.

Pixi Viewport creator David Figatner thought this should be default in Pixi's Interaction Manager.
https://github.com/davidfig/pixi-viewport/issues/196

Expected Behavior

Presume that Pixi would capture this event, and prevent default of the browser.

Believe this works in frameworks like Fabric.js and Deck.gl

Current Behavior

Pinch gesture is picked up by the browser, zooming the entire browser.

Another side effect is that the Pixi view becomes grainy since it isn't being re-rendered.

Possible Solution

Prevent default of the events.

Maybe the intent is for it to zoom the entire DOM, without rendering high resolution.

Steps to Reproduce

Pinch-zoom a Pixi application - ideally with Pixi Viewport.

Environment

• pixi.js version: 5.2.0
• Browser & Version: Chrome 80.0.3987.100 (Official Build) (64-bit)
• OS & Version: macOS Mojave 10.14.6
• Running Example: https://codepen.io/jasonsturges/pen/BayMWxm

[eXponenta]

This isn't bug, preventing enabled by default excludes pointer events for backwards campatibility.

You can submit PR if you know how it may be implemented correctly.

https://pixijs.download/dev/docs/PIXI.interaction.InteractionManager.html#autoPreventDefault

But i can't found how we may do this without flags.
https://stackoverflow.com/questions/49439378/google-chrome-disable-pinch-zoom/51879650

[ivanpopelyshev]

I'm felling déjà-vu. @eXponenta we discussed this week or two ago, right?

[eXponenta]

@jasonsturges I don't believed you about it and reproduced same behavior on Fabric.js

Can be closed as Wan't fix.

[ivanpopelyshev]

I honestly dont know about this thing, except that i saw people complaining on it.

The best way to solve that is make simple canvas2d app, no pixi, with those events prevented. If it works, then we can hack PIXI.interaction.InteractionManager the method that bind events. If that works - we can make PR.

Another idea is to look at which framework actually handles that and copy code from there.

@eXponenta has shown that Fabric by default doesnt.

[jasonsturges]

@eXponenta This Fabric.js app prevents default - I guess it's not a built-in feature, though:
https://mudin.github.io/indoorjs/

Deck.gl has this built-in, I think
https://deck.gl/showcases/gallery/icon-layer

Nebula.gl or Kepler.gl express this from Deck.gl:

• https://nebula.gl/geojson-editor/
• https://kepler.gl/demo

Not sure what Three.js is doing
https://threejs.org/editor/

[bigtimebuddy]

Have you tried disabling page zoom via the viewport meta tag?

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

[jasonsturges]

@bigtimebuddy That attribute only applies to mobile - at least for Chrome, Google decided to ignore that on desktop in recent years.

@eXponenta @ivanpopelyshev Thanks for the background on how and why Interaction Manager currently operates - maybe it comes down to:

• There is no capability nor desire to support this
• Some capability could be provided to extend or support this (option or plugin, but responsibility to implement falls on the user to incorporate into their application)
• Build this into the core

If there's interest here, I could try to isolate some code or put together a pull request.

Otherwise, while I'd welcome any suggestion for implementation, I'll address the issue within my own applications.

[eXponenta]

@jasonsturges
Ok, i found a solution. It is simple and doesn't apply fo PIXI.

You should prevent wheel event =)

https://www.pixiplayground.com/#/edit/qjyV1YQMdfWc-db8AVGd2

Added to WIKI:
https://github.com/pixijs/pixi.js/wiki/v5-Hacks#prevent-pinch-gesture-in-chrome

[ivanpopelyshev]

I don't know which label to assign here. Yes, its a bug, but we cant fix it in pixi itself because we are not framework, its used job to do it.

We can mention it in wiki ( https://github.com/pixijs/pixi.js/wiki/v5-Hacks#prevent-pinch-gesture-in-chrome ) and maybe somewhere in docs where you point at.

[jasonsturges]

@eXponenta Phenomenal! Thanks for isolating that, with demo and documentation update!

And thanks @ivanpopelyshev for all the help and insight you've provided.

[1032740078]

@jasonsturges
好的，我找到了解决方案。这很简单，不适用于PIXI。

您应该防止wheel事件=）

https://www.pixiplayground.com/#/edit/qjyV1YQMdfWc-db8AVGd2

添加到WIKI中：https :
//github.com/pixijs/pixi.js/wiki/v5-Hacks#prevent-pinch-gesture-in-chrome

感谢 https :
//github.com/pixijs/pixi.js/wiki/v5-Hacks#prevent-pinch-gesture-in-chrome 这个地址里的方法起作用