Safari: clicking on canvas triggers a pointerout event

Repro steps:

  1. In (Mac) Safari, open https://playground.babylonjs.com/#6UZFUG#1, a default playground with a pointerout handler added.
  2. Click on the canvas.
    Result: pointerout fires and logs to console.
    Expect: no pointerout since the pointer hasn’t left the canvas.

Doesn’t repro in Chrome.
Interestingly, also doesn’t repro if I flip the playground to Babylon 4.2.0. So it looks like something has changed in v5.

Thanks for the report!

Tagging @PolygonalSun

I’ll take a look at this and see what’s going on

2 Likes

Just wanted to give a quick update on this. I was able to verify the behavior that you’ve found but I haven’t found the root cause yet. I am currently trying to figure out what change may have caused this and will update again when I find the root cause.

2 Likes

Update:
As it turns out, this issue is a bug with Safari so I’ve taken the following actions:

// Example
engine.onCanvasPointerOutObservable.add((eventData) => {
    // Do something on pointerout
});

I will reply on this thread when the workaround has been merged.

4 Likes

Thanks for digging in to all this! The workaround didn’t quite work for my use case, since I need pointerout to fire when mousing from the canvas to popup HTML UI that overlays it (inside its rectangle). But it provided the perfect inspiration to use document.elementFromPoint for a similar workaround by re-validating the hit test.

Makes total sense !!! @PolygonalSun would you mind adding it as well ?

I can look at using document.elementFromPoint. That could be a promising workaround while we wait for the bug fix.

1 Like

Hey @mattdmorgan, I modified out I was handling the logic for onCanvasPointerOutObservable to use document.elementFromPoint and it works pretty well locally so the change is currently in PR: Modified Safari pointerout workaround to use elementFromPoint by PolygonalSun · Pull Request #11565 · BabylonJS/Babylon.js (github.com)

2 Likes

PR is merged

Sounds great, thanks again!