Search Unity

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

Discussion in 'Web' started by ivank, Nov 27, 2023.

  1. ivank


    Nov 16, 2013
    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:
    Code (CSharp):
    1. @media screen and (orientation: landscape) {
    2.   body {
    3.     transform: rotate(90deg);
    4.     transform-origin: right top;
    5.     width: 100vh;
    6.     height: 100vw;
    7.     overflow-x: hidden;
    8.     position: absolute;
    9.     top: 100%;
    10.     right: 0;
    11.   }
    12. }
    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...? :)
  2. MousePods


    Jul 19, 2012
    ivank likes this.