GUI Anomaly with HORIZONTAL_ALIGNMENT_RIGHT

Bugs
1

I’ve encountered a very strange problem involving the layout and mouse pointer positions with GUI controls. I’ve spent some time trying to isolate it, and here’s what I’ve discovered.

When a button, radiobutton or checkbox is instantiated within a container with horizontalAlignment of HORIZONTAL_ALIGNMENT_RIGHT, and the browser is in full screen mode, the portion of the button control that responds to mouse click is shifted about 20 pixels to the left. (That is, you have to click to the left of the a checkbox to select it.) But here are a few more observations:

  • This occurs only with alignment RIGHT (cannot mirror the problem with alignment LEFT).
  • Resizing the browser window, opening the dev tools, or opening the debug inspector fixes the problem.

One other interesting observation: I’ve only had the problem when compiling with either Webpack or Vite. (I cannot reproduce the issue in the Playground, e.g.)

As I’ve tracked this down for awhile and eliminated nearly all code except for what I’ve described above, it doesn’t seem that the source of the problem could be in my code (unless it is related to the config files). But I don’t know if it is more likely an issue with Babylon or Webpack/Vite (although the fact that it occurs in both Webpack and Vite builds may suggest that it originates in Babylon.

Although I can work around this problem by only using LEFT alignment, it obviously isn’t optimal. Would anyone have any idea what could be causing this (or if I’ve perhaps overlooked something simple)?

3

Hmm, that’s very surprising. What version of Babylon are you using in your Webpack setup?

4

If you could provide a minimal GitHub repo that reproduces the issue, that would be super helpful in tracking this down

5

That was the point of this post. It does not occur in the playground environment. And it should be easy to reproduce if you use one of the environments I’ve mentioned.

I haven’t updated to version 5. However, I cannot reproduce the issue in the playground in version 4 or 5. So that doesn’t seem to be the problem.

6

Something else I’ve noticed regarding this scenario: after I resize the browser from full to and back to full screen again, the problem is repaired. Not only that, but I’ve also noticed that the clarity of the scene/UI is better. So, looking this over again, it appears that when the scene initially renders from startup, it not only has the mouse coordinates issue I detailed above, but the resolution isn’t quite perfect either. Something isn’t synchronized properly, but I don’t yet know what it is. Does this ring any bells with anyone?

7

I believe I found the source of this issue, and hopefully the proper resolution. Apparently, HTML canvas has two different size properties - canvas size and drawing buffer. Resizing the browser will automatically resize the canvas, but not the drawing buffer, which can result in anti-aliasing errors. Synchronizing these (as below) seems to resolve this issue.

canvas.width = canvas.clientWidth * window.devicePixelRatio;
canvas.height = canvas.clientHeight * window.devicePixelRatio;

1 Like
9

Ah, glad you figured it out! We have a similar issue in the GUI editor actually, where resizing the window can break the alignment of the controls. Maybe we need the same fix :slight_smile: