In WebXR GUI is not scaling correctly

First time it opens correctly, from next time the UI is not scaling correctly. please see below buttons are bigger

This is really hard to troubleshoot without a repro in the playground. It would be great if you could provide one ?

@RaananW our XR guru could then have a look at it :slight_smile:

i’ll look into that. Any playground you can share with us?

Sorry for late reply,

Here is application we are building, once you open this link in mobile, you have AR button in right corner.

first time it opens correctly with correct scaling , next time if i open this link and click on AR button the buttons scales are not correct.

is this enough for your debugging, please let me know.

@RaananW is off next week so please be patient for the answer and do not hesitate to ping him back in a week :slight_smile:


I opened the link. First - great work! Nice way of dealing with the hit test marker.

I couldn’t reproduce the issue. The buttons scale the same when I open, close and reopen, and refresh the page. They are always the same (very small, but same size). Is it possible it was already resolved due to another fix?

I’m off this week so I won’t be available too much, but would be great to have screenshots of the expected behavior to understand what I need to be looking for

1 Like

following up on this - was it solved?

@RaananW , it is not solved , still i see the scaling issues of GUI elements, will test it again and share the URL

now i am not seeing the scaling issues. after i removed react hook to the resize canvas.

Here is the samples

But i have one issue now , the GUI buttons are not responsive in AR mode, if the click on GUI button it is hitting camera screen instead of Button, is there some thing i can do to avoid it.

I came on here to ask the exact same question and saw it was the most recent one asked… serendipitous…

I am having the same problem where my GUI flips between 2 sizes, seemingly randomly, every time i open up my AR project.
I’m running it through Storybook to test but will try and make a playground to show the issue.
Here are screenshots of what i just got running reloading the same code twice, and both times loading the page with the same phone orientation as well (should say ‘Searching for surface’ and ‘Some Descriptive Text Here’, which is cut off in both also):

1 Like

I will be happy to see a playground i can debug. I remember it was an issue and I thought we took care of that, but it seems like it is still not working correctly.

1 Like

@RaananW one more question I have in the above url in pasted you see plane detection marketer which is attached to the plane, when I move the camera right side or left side the marker is changing orientation vertical , I am using transpose on result . Is there some guidence you can help me on this

Would you be able to check this PG - Simple GUI in fullscreen mode | Babylon.js Playground ( ?

Is this the expected behavior? XR takes the entire space with devicePxelRatio “resetting” to 1 (it doesn’t reset, but isn’t being used as out of XR). Which means you will need to scale up every GUI element that is a direct child of the advanced dynamic texture when you enter XR, and scale down when you are out of XR.

Just as a note, I am trying to think how to automatically do that, but as XR is decoupled from the GUI it is an interesting task :slight_smile:

1 Like

Hi there @Krishna_Kishore just checking in your issue again, how is it :slightly_smiling_face: