# In WebXR GUI is not scaling correctly **URL:** \ **Category:** Questions\ **Tags:** webxr\ **Created:** [September 18, 2021, 2:30pm UTC](https://forum.babylonjs.com/t/in-webxr-gui-is-not-scaling-correctly/23937 "2021-09-18T14:30:34Z")\ **Posts on this page:** 17\ **Page:** 1
**Author:** ![Krishna\_Kishore](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/krishna_kishore/32/3682_2.png) [@Krishna\_Kishore](https://forum.babylonjs.com/u/Krishna_Kishore)\ **Post date:** [September 18, 2021, 2:30pm UTC](https://forum.babylonjs.com/t/in-webxr-gui-is-not-scaling-correctly/23937/1 "2021-09-18T14:30:34Z")
First time it opens correctly, from next time the UI is not scaling correctly. please see below buttons are bigger ![NextTime](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/3/a/3ade0e7928660df2d934851e6338ae4c7c55e2c1.jpeg) ---
**Author:** ![sebavan](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/sebavan/32/57_2.png) [@sebavan](https://forum.babylonjs.com/u/sebavan)\ **Post date:** [September 19, 2021, 4:57pm UTC](https://forum.babylonjs.com/t/in-webxr-gui-is-not-scaling-correctly/23937/2 "2021-09-19T16:57:38Z")
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 šŸ™‚ ---
**Author:** ![RaananW](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/raananw/32/28955_2.png) [@RaananW](https://forum.babylonjs.com/u/RaananW)\ **Post date:** [September 20, 2021, 9:37am UTC](https://forum.babylonjs.com/t/in-webxr-gui-is-not-scaling-correctly/23937/3 "2021-09-20T09:37:10Z")
---
**Author:** ![RaananW](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/raananw/32/28955_2.png) [@RaananW](https://forum.babylonjs.com/u/RaananW)\ **Post date:** [September 20, 2021, 11:39am UTC](https://forum.babylonjs.com/t/in-webxr-gui-is-not-scaling-correctly/23937/4 "2021-09-20T11:39:06Z")
iā€™ll look into that. Any playground you can share with us? ---
**Author:** ![Krishna\_Kishore](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/krishna_kishore/32/3682_2.png) [@Krishna\_Kishore](https://forum.babylonjs.com/u/Krishna_Kishore)\ **Post date:** [October 9, 2021, 12:03pm UTC](https://forum.babylonjs.com/t/in-webxr-gui-is-not-scaling-correctly/23937/5 "2021-10-09T12:03:31Z")
Sorry for late reply, Here is application we are building, once you open this link in mobile, you have AR button in right corner. [https://web.levit3d.com/embed/6b836b/ZGQ0ZTYwZDEtYWFhOS00MTk5LWI5ZDgtY2VlYTc5NGNlZTI2](https://web.levit3d.com/embed/6b836b/ZGQ0ZTYwZDEtYWFhOS00MTk5LWI5ZDgtY2VlYTc5NGNlZTI2) 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. ---
**Author:** ![sebavan](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/sebavan/32/57_2.png) [@sebavan](https://forum.babylonjs.com/u/sebavan)\ **Post date:** [October 9, 2021, 12:31pm UTC](https://forum.babylonjs.com/t/in-webxr-gui-is-not-scaling-correctly/23937/6 "2021-10-09T12:31:32Z")
@RaananW is off next week so please be patient for the answer and do not hesitate to ping him back in a week šŸ™‚ ---
**Author:** ![RaananW](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/raananw/32/28955_2.png) [@RaananW](https://forum.babylonjs.com/u/RaananW)\ **Post date:** [October 9, 2021, 5:25pm UTC](https://forum.babylonjs.com/t/in-webxr-gui-is-not-scaling-correctly/23937/7 "2021-10-09T17:25:08Z")
Hey, 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 ---
**Author:** ![RaananW](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/raananw/32/28955_2.png) [@RaananW](https://forum.babylonjs.com/u/RaananW)\ **Post date:** [November 19, 2021, 2:02pm UTC](https://forum.babylonjs.com/t/in-webxr-gui-is-not-scaling-correctly/23937/8 "2021-11-19T14:02:02Z")
following up on this - was it solved? ---
**Author:** ![Krishna\_Kishore](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/krishna_kishore/32/3682_2.png) [@Krishna\_Kishore](https://forum.babylonjs.com/u/Krishna_Kishore)\ **Post date:** [November 22, 2021, 5:12am UTC](https://forum.babylonjs.com/t/in-webxr-gui-is-not-scaling-correctly/23937/9 "2021-11-22T05:12:22Z")
@RaananW , it is not solved , still i see the scaling issues of GUI elements, will test it again and share the URL ---
**Author:** ![Krishna\_Kishore](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/krishna_kishore/32/3682_2.png) [@Krishna\_Kishore](https://forum.babylonjs.com/u/Krishna_Kishore)\ **Post date:** [November 25, 2021, 12:13pm UTC](https://forum.babylonjs.com/t/in-webxr-gui-is-not-scaling-correctly/23937/10 "2021-11-25T12:13:31Z")
now i am not seeing the scaling issues. after i removed react hook to the resize canvas. Here is the samples [https://web.levit3d.com/embed/45bfdb/OGQxYmEzNmQtNjA4Mi00MTQ0LWE0ZDItZTUxOTM2MDA1YTgw](https://web.levit3d.com/embed/45bfdb/OGQxYmEzNmQtNjA4Mi00MTQ0LWE0ZDItZTUxOTM2MDA1YTgw) 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. ---
**Author:** ![Chrisor9](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/chrisor9/32/16260_2.png) [@Chrisor9](https://forum.babylonjs.com/u/Chrisor9)\ **Post date:** [November 25, 2021, 12:40pm UTC](https://forum.babylonjs.com/t/in-webxr-gui-is-not-scaling-correctly/23937/11 "2021-11-25T12:40:20Z")
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): ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/1/5/152d8ce73e30ec82d06f35282b612391abf41a7a.jpeg) ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/2/4/2453e610ddea0c3b7bef10906c9a2faf98bde5d3.jpeg) ---
**Author:** ![RaananW](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/raananw/32/28955_2.png) [@RaananW](https://forum.babylonjs.com/u/RaananW)\ **Post date:** [November 25, 2021, 2:12pm UTC](https://forum.babylonjs.com/t/in-webxr-gui-is-not-scaling-correctly/23937/12 "2021-11-25T14:12:46Z")
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. ---
**Author:** ![Krishna\_Kishore](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/krishna_kishore/32/3682_2.png) [@Krishna\_Kishore](https://forum.babylonjs.com/u/Krishna_Kishore)\ **Post date:** [November 25, 2021, 4:01pm UTC](https://forum.babylonjs.com/t/in-webxr-gui-is-not-scaling-correctly/23937/13 "2021-11-25T16:01:04Z")
@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 ---
**Author:** ![RaananW](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/raananw/32/28955_2.png) [@RaananW](https://forum.babylonjs.com/u/RaananW)\ **Post date:** [November 26, 2021, 7:10pm UTC](https://forum.babylonjs.com/t/in-webxr-gui-is-not-scaling-correctly/23937/14 "2021-11-26T19:10:36Z")
Would you be able to check this PG - [Simple GUI in fullscreen mode | Babylon.js Playground (babylonjs-playground.com)](https://www.babylonjs-playground.com/debug.html#XCPP9Y#10399) ? 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. ---
**Author:** ![RaananW](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/raananw/32/28955_2.png) [@RaananW](https://forum.babylonjs.com/u/RaananW)\ **Post date:** [November 26, 2021, 7:11pm UTC](https://forum.babylonjs.com/t/in-webxr-gui-is-not-scaling-correctly/23937/15 "2021-11-26T19:11:10Z")
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 šŸ™‚ ---
**Author:** ![carolhmj](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/carolhmj/32/25918_2.png) [@carolhmj](https://forum.babylonjs.com/u/carolhmj)\ **Post date:** [December 22, 2021, 4:52pm UTC](https://forum.babylonjs.com/t/in-webxr-gui-is-not-scaling-correctly/23937/16 "2021-12-22T16:52:24Z")
Hi there @Krishna_Kishore just checking in your issue again, how is it šŸ™‚ ---
**Author:** ![RaananW](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/raananw/32/28955_2.png) [@RaananW](https://forum.babylonjs.com/u/RaananW)\ **Post date:** [February 10, 2023, 2:12pm UTC](https://forum.babylonjs.com/t/in-webxr-gui-is-not-scaling-correctly/23937/17 "2023-02-10T14:12:46Z")