Mesh's ActionManager on android chrome highlights/selects canvas on click

Hi, I was working on a project and we noticed that the whole canvas flashed blue when clicking on a mesh in an android device using chrome.

I managed to narrow it down to the action managers and I could reproduce it on your official action managers playground:

And here’s a playground with only an action manager with an empty method:

For me all it took was adding the trigger BABYLON.ActionManager.OnPointerOutTrigger to a mesh and an empty method to start highlighting the canvas when the mesh was clicked.

It can be reproduced by using the mobile emulator in chrome which made it simpler for me to find a solution. So there is no need to use a mobile device to troubleshoot and thus might just be a chrome touch issue.

The solution/workaround:
I added the css -webkit-tap-highlight-color: rgba(0, 0, 0, 0) to the canvas and that removed the blue colour.


Hopefully this can help someone track down the cause if it’s code related as it only happens if you click the meshes with action managers.

I can do a draft PR for documentation mentioning the issue if needed but I don’t know if the action managers section would be the place to do that.

2 Likes

cc @PirateJC for the doc

Hey @saaratrix

Sorry about the delayed response. This sounds like an excellent addition to the doc pages. Yes I agree I think the best place to add this would be in the action managers section.

We’d love it if you’d put up a draft PR for it!

1 Like

I wasn’t sure how to write it inside that file it so instead I went to investigate the issue and found the cause! It’s this line inside scene.inputManager - _processPointerMove that causes it:
canvas.style.cursor = scene.hoverCursor;

If I comment it out it doesn’t happen anymore.

Which now gives us a reproducable case of just <div style="cursor: pointer;"></div> to trigger the issue.

So now we can solve the bug instead of documentation!

I would propose adding a line inside engine.ts _disableTouchAction()?
(this._renderingCanvas.style as any).webkitTapHighlightColor = "transparent"

WOOT! Even better! Do you want to submit the PR for the bug fix?

Sure, I’ll try and do it this weekend.

1 Like