Camera sticks to pointerdown when going out of the screen

Hey all. I was playing around in my game and saw that the pointerUp event won’t get fired when I leave the screen with the right mousebutton pressed.

Steps to reproduce:

  1. Open up
  2. Make the browser window a little smaller (so you have space on the right side to move outside the browser window)
  3. Keep the right mouse pressed and move outside the window
  4. When returning inside the window it will move without pressing the button

It does however work with the Left mouse button. Is this a bug or is this working as intended?

Maybe something related? [Solved] mousedown action sticks on canvas after mouseout - Questions & Answers - HTML5 Game Devs Forum (bit old but still)

Kapture 2021-04-28 at 15.15.10

@PolygonalSun do you mind having a look ?

Lemme take a look and see what’s going on

Hey @JPeer264, as of version 5.0.0-alpha.19, I was unable to repro what you were seeing. I tested this with both Chrome and Firefox. I just wanted to make sure that I was understanding your repro steps.

  1. Reduce window size so that there is a gap between right side of browser window and right side of screen.
  2. Right-click on Canvas window and, while holding right mouse button, move off of screen to the right so that the cursor is off of the browser window.
  3. Release right mouse button
  4. Return cursor to canvas (while not pressing any mouse buttons) and movement should still happen.

Is that correct?

Hey @PolygonalSun , thanks for checking this out. Yes, these are exactly the steps. Does this mean there is no movement anymore when you release the right mouse button?

Tbh I just tried it in v4.2.0, but rechecked in the playground with v5.0.0 (not sure if it has v5.0.0-alpha.19 tho) and the movement is still going without any mouse button pressed (Chrome).

So I talked with some of my team and none of us were able to repro this. Would it be possible for you to try to repro this in Incognito Mode or with Extensions disabled?

When the mousedown starts create a observable for mouseout and then detach the controls. Then add a listener to reattach the controls when the mousein happens.

You gotta clean up your observables on each step too. Ive done it for a few projects now, but I cant share that code now as its become kind of standard to our React/iFrame website template and is something that is the clients code now and not mine to share.

Did find this though:

I tried the given playground in Incognito Mode. But this still happens to me :thinking: Maybe it is my setup (MacBook + Magic Mouse)? If you want I could also go a little deeper, if you tell me where I should look in the code.

@Pryme8 I think I already found that one, but didn’t quite work well for me.

Try a different browser then Safari, if it work in those then it would be localized problem that is with Safari and we can go from there.

Huh true! It seems to appear only in Chrome and Opera. Not on Safari, Firefox. Maybe it is not a Babylon issue but rather a Chromium issue?

Does it do it on the Canary Build?

I would not know about Opera

I can’t quite reproduce this. Every time i release the mouse button outside i get the context menu of the application under my mouse.

Also happens on Chrome Canary

Might need to bind the events to a different target then. Maybe like body, or window, or canvas not sure. Id mess around with that stuff.

also could see about firing a manual click on the canvas to see if that releases the pointer

I think a different target won’t be the solution here as with the left mouse button everything is alright. It’s only the right mouse button which does not release the event.

See if the event is actually firing by having some sort of console.log and if it is then let me know. The detach controls worked for us in the past, but Im not sure if I had to fire a manual click on the canvas as well to release the initial one.