Unity 2021.1 build canvas grows indefinitely when using no height or width is provided

[jeffreylanters]

Please avoid duplicates

• I checked all open issues and discussions and none of them matched my problem.

Language and Compiler

TypeScript's built-in Compiler

What environment are you using?

Local Development Server

When does your problem occur?

When the Unity App starts

What does your problem relate to?

The problem seems Unity related

React-Unity-WebGL Version

9.0.0

React Version

18.0.0

Unity Version

2021.1

What happened?

When no width and height are provided, the canvas grows indefinitely.

Reproducible test case

import React from "react";
import { Unity, useUnityContext } from "react-unity-webgl";

function App() {
  const { unityProvider } = useUnityContext({
    loaderUrl: "build/myunityapp.loader.js",
    dataUrl: "build/myunityapp.data",
    frameworkUrl: "build/myunityapp.framework.js",
    codeUrl: "build/myunityapp.wasm",
  });

  return (
    <Unity unityProvider={unityProvider} />
  );
}

Would you be interested in contributing a fix?

• yes, I would like to contribute a fix

[jeffreylanters]

Issue can be resolved by providing a height and width to the Unity Component for both version 8.x and 9.x.

[thygrrr]

I have the opposite issue (using Gatsby 4.24.3 and Sass), the unity canvas defaults to a (very small) width/height, and I cannot style it via class name, only via providing a direct style.

My workaround is this (and then styling the container div), but it's odd.
<Unity style={{ width:"100%", height:"100%"}} unityProvider={unityProvider} />

If not passed a literal style it will never expand and in fact have a fixed size of like 300x120, as per its style inspected from the browser.

[jeffreylanters]

@thygrrr That is very odd indeed. Never hear of anyone running into this problem. The size you're mentioning when no styles are given is the expected behavior since that's the browser's fallback. -- what version of Unity are you using?