Firefox pointerlock + mousemove + mousedown behavior

Questions
1

Mousedown and mousemove do not seem to work at the same time while pointerlocked in Firefox. This is likely a bug in Firefox. I was wondering if anyone knew why it occurs or how to fix it?

Repro: https://www.babylonjs-playground.com/#219IXL#151 try to click while moving the camera around in firefox – it’ll freeze while the mouse button is down

I’m making a first person shooter, so clicking and dragging while pointerlocked is common. I tried pointermove and pointerdown, and those work together, but then pointer down events don’t seem to be able to do rightclick+leftclick at the same time (which I also use to aim down sights and shoot). I’m pretty sure regular mousedown and mousemove are supposed to work even in firefox and I almost wonder if it has something to do with which element they’re attached to…or the actual dom contents somehow eating the event before it bubbles.

All of this works fine in chrome and edge as far as I can tell.

The old forum had some discussion on the topic in 2016 + 2018: Problem with Pointer Lock - Questions & Answers - HTML5 Game Devs Forum

2

Hi timetocode,

I can confirm your repro: works in Chrome, doesn’t work in Firefox, and the mousemove event definitely seems to be getting eaten somewhere. Talked to @Deltakosh about it, and our current theory is that you’re correct and that it’s a bug in Firefox.

Currently we don’t know a workaround, but we’ll be looking into it. I did see this while poking around, which seems like it might be related:

Unfortunately, though, calling preventDefault() at the top level didn’t seem to get the event back for me :frowning: , which indicates either that the interruption is happening in a lower level or the issue is unrelated.

1 Like
3

I did a little more digging and it is possible in Firefox to receive mousedown events while the mouse is moving and the pointer is locked.

This little bit of code can prove it: mouse events during pointerlock (chrome & firefox)
I can click around in this one with the console open and see mousemove + mousedown events. Why does it work? I’m not sure. Presumably something to do with the DOM.

I’m going to gradually recreate the dom structure of my game and see if the event goblin makes a move.

4

I have found the issue. The scene captures these events and prevents them from bubbling. How it is that my game appeared to work fine in chrome and only had strange behavior in firefox I’m not sure…

Is it a bjs bug? A firefox bug? I’m not sure… but here is where it lives:

Scene invokes attachControl followed by setting up _onPointerDown, which has an evt.preventDefault() that consumes these events. I can provide more information if needed.

There are 46 other preventDefaults (which maybe have an effect when different camera types or controllers are used…?) but this one specific was the difference between being able to repro and nonrepro using the babylon.js html starter template and mouse controls: First Steps - Babylon.js Documentation . Here’s a test script to add to the bottom:

    <script>
        let ele = canvas 
        ele.addEventListener('mousemove', e => {
            console.log('mousemove')
        })

        ele.addEventListener('mousedown', e => {
            console.log('mousedown')
            ele.requestPointerLock()
        })

        ele.addEventListener('mouseup', e => {
            console.log('mouseup')
        })
    </script>

I believe the fix for me is scene.detachControl() – b/c my keyboard and mouse stuff is handled manually anyways. Hopefully I’m not missing some potential side effects…

I don’t have a fix for the PG in the original post, but I would like to note that scene.preventDefaultOnPointerDown = false does not affect it (though it sounds like it would). I bet just commenting out that one preventDefault would fix it, though I’m not sure if that would break something else in bjs.

1 Like
5

Not much to add here, but I figured I would confirm it is a problem with some kind of Firefox update. I came to BabylonJS from the Armory Engine, and it seems they ran into the same pointer lock issues with Firefox after some version update. They hadn’t found a way to resolve it yet either last I checked with the user group/devs.

1 Like
6

Yeah but this is inside a this.preventDefaultOnPointerDown check so this should be controllable:
https://github.com/BabylonJS/Babylon.js/blob/master/src/scene.ts#L2045

same for up:
https://github.com/BabylonJS/Babylon.js/blob/master/src/scene.ts#L2089

Did you try to set both up and down booleans to false?

1 Like
7

I’ve tested those flags (both) and they work for my game in Firefox.

So if anyone comes across this in the future, try out preventDefaultOnPointerDown and preventDefaultOnPointerUp, or scene.detachControl(). Either of these will let mousemove, mousedown, and mouseup all the way out in Firefox.

I don’t know what is up with that old pg (which doesn’t change with those) but none of that effects my game.

8

That is a gooooood news!