`WheelEvent.deltaMode` changed with Pixi7 only on FireFox

We use a "wheel" event listener directly on the <canvas> (for UI zooming).

When upgrading from PIXI6->7 we noticed that the wheel-handler (only) on FireFox gets different event settings. deltaMode changed from 0 (DOM_DELTA_PIXEL) with PIXI6 to 1 (DOM_DELTA_LINE) with PIXI7.

The listener seems not to be connected to PIXI at all? Why only on FireFox? We cannot spot the reason.

var app = new PIXI.Application({
    width: window.innerWidth,
    height: window.innerHeight,
    backgroundColor: 0x2c3e50
});
document.body.appendChild(app.view);

console.log("version", PIXI.VERSION);

app.view.addEventListener("wheel", (e) => {
    console.log(e.deltaY, e.deltaMode);
});

Possible Solution

Evaluating deltaMode and scaling deltaY by a heuristic constant works around the effect, but we’d love to understand the reason.

Steps to Reproduce

Run the code above in the PIXI playground and switch PIXI version in the settings. Observe console log in the DevTools when scrolling with the mouse wheel.

Note that it only holds when using a mouse-wheel; using the touchpad also triggers the listener but does not show the effect (deltaMode is always 0).

Environment

• pixi.js version: 7.x vs. 6.x
• Browser & Version: FireFox 107.0.1 (64-Bit)
• OS & Version: seen on MacOS 13.0.1
• Running Example: https://www.pixiplayground.com/#/edit/lSDZVVwcTjAf0p1AruozD

[bhousel]

Oh! Yeah this wheel delta thing is a tricky problem - I spent some time on it a few months ago.

Here’s a link to our _normalizeWheelDelta function. Hope the comments and code are helpful to someone.

   * _normalizeWheelDelta
   * This code performs some adjustment of the wheel event delta values.
   * The values may be given in PIXEL, LINES, or PAGE and we want them in PIXEL.
   *
   * Great summaries here:
   *   https://dev.to/danburzo/pinch-me-i-m-zooming-gestures-in-the-dom-a0e
   *   https://github.com/w3c/uievents/issues/181#issuecomment-392648065
   *
   * Note that Firefox will now change its behavior depending on how you look at the delta values!
   *   https://github.com/mdn/content/issues/11811
   *   https://bugzilla.mozilla.org/show_bug.cgi?id=1392460#c33
   * (Because Pixi's `normalizeWheelEvent` code in `EventSystem.ts` reads `deltaMode` before `deltaX/Y`,
   *   we get LINES sometimes in Firefox, particularly when using a physical mouse with a wheel)
   *
   * Also see https://github.com/basilfx/normalize-wheel/blob/master/src/normalizeWheel.js
   *   for an older version of this sort of code.
   *
   * And this great page for testing what events your browser generates:
   *   https://domeventviewer.com/
   * 

https://github.com/facebook/RapiD/blob/fe19995687e5dffb2182ec939c75fc917c8e001c/modules/pixi/PixiEvents.js#L304-L371

[SuperSodaSea]

@joergplewe In PixiJS v7, when EventSystem is initialized, all the event callbacks including PIXI.EventSystem.onWheel will be automatically registered (see code in EventSystem.addEvents), which will be called before your own callback. If you add PIXI.EventSystem.prototype.onWheel = () => {}; before everything, you can get e.deltaMode === 0 on Firefox.