GUI Button not clickable on Mobile, works on playground yet not in project

Context

I am working on a figma AR project for desktop and Smartphone. The canvas is not fullscreen, until we enter XR.

bug

On smartphone (samsung s22, all browser), when you click on the canvas, the canvas get focused, but no luck receiving onPointerINSERTYOUREVENTObservable events on the buttons in the fullscreen GUI.

Expected behavior

Works without any issue on desktop mode. Buttons receive clicks.

Playground

Surprisingly enough, I copied the code with the exact GUI on playground (https://playground.babylonjs.com/#XNIQCK#21) but I was not capable of reproducing the bug. Meaning that the playground is the expected behavior even on mobile.

Luckily, this is an open source project with a public github repository. I hope you could find what’s wrong with it :

Processes to reproduce

  1. access the url on smartphone
  2. login to figma
  3. add any project to the project list (stored locally) by pasting it’s url in the form.
  4. Open the project.

Now you should see a list of your frames and you would want to click them to spawn them in the environment. But on Mobile it’s not possible.

cc @carolhmj and @RaananW in case we have special tags on the canvas ?

I noticed the behavior fix itself after entering and exiting XR in the situation where the browser support it (Samsung browser and chrome)