Setting setHardwareScalingLevel breaks GUI button on HDP / Retina displays

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

The issue disappears when not using hardwarescalinglevel :
https://www.babylonjs-playground.com/#J1KG86#32

Am i doing something wrong here ?

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 :pray:

pinging @msDestiny14

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?

Hey @Tom_Krikorian , does this solve the issue?

Test UI Minsar | Babylon.js Playground (babylonjs-playground.com)

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.

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) (just a small variation on the last PG i pasted). I can click the button on my tests (console outputs TEST)

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):

That’s because of the missing XR context on Safari. Does this work? Test UI Minsar | Babylon.js Playground (babylonjs-playground.com)

Could you also paste the console output? would be good to know what error is thrown to be able to make it fail silently.

Yes, this PG does work and displays (correctly I suppose :slightly_smiling_face: on all of the above (incl. iPhone6). It comes along with this console result on non-XR capable OS/device.

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 :slight_smile:

No worries. If I can be of help. It’s not often with your big brains out there. :star_struck: BJS is becoming such an amazing framework. :relieved:

1 Like

Problem found, problem (soon to be) solved :slight_smile:

[XR] should check if xr is available before using it by RaananW · Pull Request #10195 · BabylonJS/Babylon.js (github.com)

2 Likes

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.

This has not been deployed yet and will be in the next nightly in a couple hours.

What device are you testing with?

it is deploying at the moment.

I’m using a xiaomi mi 8.

The PR is about mawa’s issue i think ?

yep, unrelated to the base issue here.
I will have to debug on my android, will keep you posted :slight_smile:

1 Like