WebGL - UI Toolkit buttons position does not match the "clickable" areas when page is 90 turned

Hallo, another rather funny bug, perhaps:

The WebGL scene is embedded into html page, which is, when viewed on desktop, turned 90 degrees into portrait position using this css:

@media screen and (orientation: landscape) {
  body {
    transform: rotate(90deg);
    transform-origin: right top;
    width: 100vh;
    height: 100vw;
    overflow-x: hidden;
    position: absolute;
    top: 100%;
    right: 0;
  }
}

Then, the UI elements (buttons) are drawn where they should be, but their “clickable” areas (in the example below indicated by cursor icon change to “hand”) remain in the “unturned”, it means wrong, position.
Note: Fiddling with matchWebGLToCanvasSize and devicePixelRatio does not seem to influence this particular mismatch, while of course may cause/prevent the “stretched” appearance of the whole scene…

For better understanding please see (on desktop) the example here.

It is of course a bug rather unlikely to meet under normal conditions.
But, in fact, certain discrepancy between the UI Toolkit elements drawn position and their “detected/clickable” area in WebGL seems to appear even under standard conditions, when going fullscreen on desktop.
As an example, see on desktop any of the three test scenes here and check the cursor change especially when above the button at the bottom right corner. In standard windowed view, the cursor icon changes correctly above the full area of the button, while in fullscreen mode it does not seem so… (maybe unless the (full) screen is 16 : 10 as the embedded window of the 3d scene is).

Does anybody have similar experience, or is it just my bad luck…? :slight_smile:

I found a bug similar to what you are describing. Possibly the same issue? The draw area is correct but certain areas are unclickable and some you have to click multiple times.

1 Like