Render size of WebGL Canvas

[KevinYuki]

Hey! I need some help rendering the WebGL canvas to take all screen space available. So I set the width and height of the canvas to 100%. The width works perfectly, but the height has a strange behaviour: it keeps growing like in the video below.

My Unity component:

     <Unity
        style={{
          visibility: isLoaded ? "visible" : "hidden",
          height: "100%",
          width: "100%",
        }}
        unityProvider={unityProvider}
      />

Does anybody have any suggestions about how I can make the canvas take all the available space?

Recording.2023-07-19.150430.mp4

[jeffreylanters]

Hi. This is a know issue on Unity's side. Try wrapping it into a div with the desired size as following:

<div style={{ width: "100%", height: "100%" }}>
  <Unity style={{ width: "100%", height: "100%" }} />
</div>