# Setting setHardwareScalingLevel breaks GUI button on HDP / Retina displays **URL:** \ **Category:** Bugs\ **Created:** [April 8, 2021, 9:31am UTC](https://forum.babylonjs.com/t/setting-sethardwarescalinglevel-breaks-gui-button-on-hdp-retina-displays/19808 "2021-04-08T09:31:47Z")\ **Posts on this page:** 20\ **Page:** 1
**Author:** ![Tom\_Krikorian](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/tom_krikorian/32/10625_2.png) [@Tom\_Krikorian](https://forum.babylonjs.com/u/Tom_Krikorian)\ **Post date:** [April 8, 2021, 9:31am UTC](https://forum.babylonjs.com/t/setting-sethardwarescalinglevel-breaks-gui-button-on-hdp-retina-displays/19808/1 "2021-04-08T09:31:47Z")
Hi ! I’ve been having issues with my UI when setting the hardwarescalinglevel to `1 / window.devicePixelRatio` to properly support devices with HDPI & Retina displays. The button only works when the hardwarscalinglevel is set to 1. You can see the issue here (on mobile, not desktop) : [https://www.babylonjs-playground.com/#J1KG86#31](https://www.babylonjs-playground.com/#J1KG86#31) The issue disappears when not using hardwarescalinglevel : [https://www.babylonjs-playground.com/#J1KG86#32](https://www.babylonjs-playground.com/#J1KG86#32) Am i doing something wrong here ? ---
**Author:** ![Tom\_Krikorian](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/tom_krikorian/32/10625_2.png) [@Tom\_Krikorian](https://forum.babylonjs.com/u/Tom_Krikorian)\ **Post date:** [April 12, 2021, 10:22am UTC](https://forum.babylonjs.com/t/setting-sethardwarescalinglevel-breaks-gui-button-on-hdp-retina-displays/19808/2 "2021-04-12T10:22:14Z")
Upping the post, it’s a blocking issue for releasing a new version of our project this week and we still did not find a solution 🙏 ---
**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:** [April 12, 2021, 10:23am UTC](https://forum.babylonjs.com/t/setting-sethardwarescalinglevel-breaks-gui-button-on-hdp-retina-displays/19808/3 "2021-04-12T10:23:43Z")
pinging @msDestiny14 ---
**Author:** ![mawa](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/mawa/32/12384_2.png) [@mawa](https://forum.babylonjs.com/u/mawa)\ **Post date:** [April 12, 2021, 10:42am UTC](https://forum.babylonjs.com/t/setting-sethardwarescalinglevel-breaks-gui-button-on-hdp-retina-displays/19808/4 "2021-04-12T10:42:48Z")
> [@Tom\_Krikorian](#): > > You can see the issue here (on mobile, not desktop) : It’s likely that you can actually see this issue on desktop as well with a 4k monitor, i.e. I had this just a few days ago (but the other way round). I had left this in my desktop version while making tests on mobile. Obviously, if you force the device pixel ratio to 1 and the ratio is in fact 0.5 or 0.25, your GUI will simply not be visible, yes? ---
**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:** [April 12, 2021, 3:53pm UTC](https://forum.babylonjs.com/t/setting-sethardwarescalinglevel-breaks-gui-button-on-hdp-retina-displays/19808/5 "2021-04-12T15:53:19Z")
Hey @Tom_Krikorian , does this solve the issue? [Test UI Minsar | Babylon.js Playground (babylonjs-playground.com)](https://www.babylonjs-playground.com/#J1KG86#33) ---
**Author:** ![mawa](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/mawa/32/12384_2.png) [@mawa](https://forum.babylonjs.com/u/mawa)\ **Post date:** [April 15, 2021, 11:13am UTC](https://forum.babylonjs.com/t/setting-sethardwarescalinglevel-breaks-gui-button-on-hdp-retina-displays/19808/6 "2021-04-15T11:13:00Z")
I was hoping it would solve MY problem (sry, just soaking-up here;) but then (as a minimal contribution/return) I can already inform yours that all I get with this PG on an older iphone6 device is a blank/white screen. On desktop it works, though I’m not sure what it does. And I cannot click the button (macOS/chrome). Edit: Oops, didn’t realize the XR part. I suppose you can forget about the above. SRY. ---
**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:** [April 15, 2021, 11:16am UTC](https://forum.babylonjs.com/t/setting-sethardwarescalinglevel-breaks-gui-button-on-hdp-retina-displays/19808/7 "2021-04-15T11:16:44Z")
I can’t test on a mac, would be great if some more people with a mac will test this PG - [Test UI Minsar | Babylon.js Playground (babylonjs-playground.com)](https://www.babylonjs-playground.com/#J1KG86#34) (just a small variation on the last PG i pasted). I can click the button on my tests (console outputs TEST) ---
**Author:** ![mawa](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/mawa/32/12384_2.png) [@mawa](https://forum.babylonjs.com/u/mawa)\ **Post date:** [April 15, 2021, 11:29am UTC](https://forum.babylonjs.com/t/setting-sethardwarescalinglevel-breaks-gui-button-on-hdp-retina-displays/19808/8 "2021-04-15T11:29:17Z")
Works in Chrome on older mac (understand i can see and push the button and get the error log and the button seems to realign correctly on resize). Tested on older macOS 10.11.6 and newer 10.15.4 versions. In Safari (both versions OS), I just get a blank (plain white) scene. No errors displayed. No warning in older version. Warning about the XR experience on the newer version OS and Safari. I get this (in Safari/mac): ![Capture d’écran 2021-04-15 à 13.35.55](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/2X/a/abf70423b73c9faaee3fd68ddc9ab2444b5d7fa8.png) ---
**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:** [April 15, 2021, 11:36am UTC](https://forum.babylonjs.com/t/setting-sethardwarescalinglevel-breaks-gui-button-on-hdp-retina-displays/19808/9 "2021-04-15T11:36:51Z")
That’s because of the missing XR context on Safari. Does this work? [Test UI Minsar | Babylon.js Playground (babylonjs-playground.com)](https://www.babylonjs-playground.com/#J1KG86#35) Could you also paste the console output? would be good to know what error is thrown to be able to make it fail silently. ---
**Author:** ![mawa](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/mawa/32/12384_2.png) [@mawa](https://forum.babylonjs.com/u/mawa)\ **Post date:** [April 15, 2021, 11:45am UTC](https://forum.babylonjs.com/t/setting-sethardwarescalinglevel-breaks-gui-button-on-hdp-retina-displays/19808/10 "2021-04-15T11:45:56Z")
Yes, this PG does work and displays (correctly I suppose 🙂 on all of the above (incl. iPhone6). It comes along with this console result on non-XR capable OS/device. ![Capture d’écran 2021-04-15 à 13.43.53](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/2X/7/729de32a179ad869862dd105d3f0419a6ff3c65c.png) ---
**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:** [April 15, 2021, 11:47am UTC](https://forum.babylonjs.com/t/setting-sethardwarescalinglevel-breaks-gui-button-on-hdp-retina-displays/19808/11 "2021-04-15T11:47:22Z")
Thanks! that’s very helpful. seems like we are adding a listener during construction. This is a different issue than the one in this thread. Will take care of this 🙂 ---
**Author:** ![mawa](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/mawa/32/12384_2.png) [@mawa](https://forum.babylonjs.com/u/mawa)\ **Post date:** [April 15, 2021, 11:50am UTC](https://forum.babylonjs.com/t/setting-sethardwarescalinglevel-breaks-gui-button-on-hdp-retina-displays/19808/12 "2021-04-15T11:50:31Z")
No worries. If I can be of help. It’s not often with your big brains out there. 🤩 BJS is becoming such an amazing framework. 😌 ---
**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:** [April 15, 2021, 11:52am UTC](https://forum.babylonjs.com/t/setting-sethardwarescalinglevel-breaks-gui-button-on-hdp-retina-displays/19808/13 "2021-04-15T11:52:58Z")
Problem found, problem (soon to be) solved 🙂 [[XR] should check if xr is available before using it by RaananW · Pull Request #10195 · BabylonJS/Babylon.js (github.com)](https://github.com/BabylonJS/Babylon.js/pull/10195) ---
**Author:** ![Tom\_Krikorian](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/tom_krikorian/32/10625_2.png) [@Tom\_Krikorian](https://forum.babylonjs.com/u/Tom_Krikorian)\ **Post date:** [April 15, 2021, 2:30pm UTC](https://forum.babylonjs.com/t/setting-sethardwarescalinglevel-breaks-gui-button-on-hdp-retina-displays/19808/14 "2021-04-15T14:30:45Z")
Hi Raanan, Thanks for looking into the issue. I checked the latest PG and i still have my issue. Button does not get any input. ---
**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:** [April 15, 2021, 2:42pm UTC](https://forum.babylonjs.com/t/setting-sethardwarescalinglevel-breaks-gui-button-on-hdp-retina-displays/19808/15 "2021-04-15T14:42:38Z")
This has not been deployed yet and will be in the next nightly in a couple hours. ---
**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:** [April 15, 2021, 2:53pm UTC](https://forum.babylonjs.com/t/setting-sethardwarescalinglevel-breaks-gui-button-on-hdp-retina-displays/19808/16 "2021-04-15T14:53:56Z")
What device are you testing with? ---
**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:** [April 15, 2021, 3:34pm UTC](https://forum.babylonjs.com/t/setting-sethardwarescalinglevel-breaks-gui-button-on-hdp-retina-displays/19808/17 "2021-04-15T15:34:22Z")
it is deploying at the moment. ---
**Author:** ![Tom\_Krikorian](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/tom_krikorian/32/10625_2.png) [@Tom\_Krikorian](https://forum.babylonjs.com/u/Tom_Krikorian)\ **Post date:** [April 15, 2021, 5:17pm UTC](https://forum.babylonjs.com/t/setting-sethardwarescalinglevel-breaks-gui-button-on-hdp-retina-displays/19808/18 "2021-04-15T17:17:32Z")
I’m using a xiaomi mi 8. The PR is about mawa’s issue i think ? ---
**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:** [April 15, 2021, 5:39pm UTC](https://forum.babylonjs.com/t/setting-sethardwarescalinglevel-breaks-gui-button-on-hdp-retina-displays/19808/19 "2021-04-15T17:39:08Z")
yep, unrelated to the base issue here. I will have to debug on my android, will keep you posted 🙂 ---
**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:** [April 15, 2021, 8:12pm UTC](https://forum.babylonjs.com/t/setting-sethardwarescalinglevel-breaks-gui-button-on-hdp-retina-displays/19808/20 "2021-04-15T20:12:56Z")
[Next page](https://forum.babylonjs.com/t/setting-sethardwarescalinglevel-breaks-gui-button-on-hdp-retina-displays/19808.md?page=2)