BABYLON.GUI.Button not working correctly in mobile chrome

Bugs
1

Hi,

I created a few buttons using BABYLON.GUI.Button.CreateSimpleButton method. The code working fine in desktop view but not in mobile view.

I use the following way to calculate the button size dynamically according to the current screen height. So that the button will be position nicely in the view.

Here is my webpage:

http://trexbiz-001-site9.atempurl.com/

var numOfButton = 12;

buttonSize = canvas.clientHeight / numOfButton + “px”;
buttonSizeD = canvas.clientHeight / numOfButton;

Here is mobile view

mobile%20view
mobile%20view540×960 24.6 KB

Here is desktop view

desktop%20view
desktop%20view957×874 95.2 KB

And the picking working fine in desktop view but not working correctly in mobile view, for example in mobile device when you click B1, it actually clicking B2.

Please advice! Thanks!

2

Hi again, C. Sorry for the slow replies. I have no answers, but be sure to carefully search the OLD BJS forum (and this one, too)… for certain keywords (as many as you can).

Here’s a search of old forum… for “canvas.clientHeight”

A few returns… maybe with some ideas inside. (fingers crossed) Try other keywords, too. I saw the term ._hardwareScalingLevel in that last search return. That term makes sense for YOUR problem, eh?

You know how it goes. The more search terms you have, the better the returns… from docs, forum, and playground searches. The more fishing rods and types of lures in water, the better the fishing. heh.

Another interesting area: GUI adaptive scaling.

~~ Topic still open… comments/ideas welcome… everyone. ~~ :wink:

3

Hey!

I cannot go to your website:

image
image1097×159 6.73 KB

But anyway I would recommend reproducing the issue on the PG (with a dummy scene of course)

4

Hi,

Previously my website was been hacked. Now have recovered. I try @Wingnut suggestion using adative scaling which fix the display issue but still have picking issue. If I change my device to landscape view, everything work fine but when I swith to portrait view, the picking not working correctly.

5

I have just completed my very first PBT
https://www.babylonjs-playground.com/#GKD3MB

The buttons seems working correctly in the Playground ! But it didn’t work correctly when integrated with my other code. What is the possible cause?

6

I am actually writing my application with asp.net framework. According to the forum
at my Index.cshtml file

/// Complete code
@{
ViewBag.Title = “Home Page”;
Layout = null;// set layout to null to enable full screen mode.
}

@model List<DirectoryData.Json.JPolygon>

html, body, canvas { margin: 0; padding: 0; width: 100%; height: 100%; font-size: 0; } 
    #renderCanvas {
        width: 100%;
        height: 100%;
        touch-action: none;
    }
</style>

When the layout is set to null, the picking is not working in portrait mode but working in landscape mode. When I comment out Layout =null, the picking is working fine for both portrait and landscape mode. Any idea?

7

I have no idea what that layout does :slight_smile: but it is for sure the reason of your problem

I tried your site on pixel2 and iphone 11 and it works on both

1 Like
8

I guess it is hardware specify problem.

9

I agree