Rendering the <Unity .../> component results in a black screen or freeze

[iAMkVIN-S]

Describe the bug
We have uploaded the same basic (just a square in a scene) Unity WebGL build on both:
(a) Standard web host (drag-and-drop the build files into FTP)
(b) React build (using react-unity-webgl)

The (a) works on both Mac and Windows. The Unity WebGL loads and the scene appears properly.

The (b) works on Windows but does not work on Mac. The Unity WebGL seems to load, but you never see the scene and freezes the browser and operating system.

At first I did not believe this was a react-unity-webgl issue, however, the exact same Unity WebGL build works when not using the package on the Mac.

To Reproduce
Steps to reproduce the behavior:

1. Go to the Unity WebGL build on the non react build on both Mac and Windows. You should not have any issues.
2. Go to the Unity WebGL build on the react build on both Mac and Windows. You should not have any issues on Windows, but freezes on Mac.

Expected behavior
Ideally the result would be the same regardless of the operating system since it is likely not an OS support issue because it does not freeze when not using the package.

Code

Details:

• React Unity WebGL Version: 8.4.10
• Device and OS: Windows 10 and Mac OS Big Sur
• Browser: Google Chrome

Additional Tests:
We've noticed other devices are having an issue when going to the react-unity-webgl React build and therefore renamed the issue from MacOS to a more general issue.

• We have detected the same behaviour on iPhone XR using Safari (iOS 14.7.1)
• We have detected a similar behaviour on Pixel 3 XL using Google Chrome (android 11), the area where the UnityWebGL should be is a black screen.
• We have detected a similar behaviour on Pixel 4 XL using Google Chrome (android 11), the area where the UnityWebGL should be is a black screen.

[jeffreylanters]

Hi. Thanks for your report and your extended tests, this really helps me narrow down the problem. I myself am using a Mac as well and never encountered any issues similar to yours. I run all my tests on Mac (which should not make any difference anyway). Do you notice any spikes when monitoring the performance of the page? And have you implemented any kind of communication, or is it just a bare build?

As another test to exclude even more possible problems, could you try the Unity build from the tests repository in your own environment?

I'm on my phone right know since it's midnight here. I'll take a better look at it tomorrow. I'll keep you posted.

[iAMkVIN-S]

Thank you for your prompt reply Jeff.

We are not using any kind of communication between the build and react. It's a dead simple static cube in an empty Unity scene. As soon as we hit our bug, I asked the team to use a blank project with just a cube to avoid any additional factors that could cause the bug.

I have added your unity build from the test repo into the project to see if we notice different results. Unfortunately, the result is very similar. The only difference seems to be that I'm getting thrown an error on the test build (last log) and the process seems to stop, whereas in our case, it freezes up. All the info level logs are the same though.

Code :

Result :

I will keep both of our hosted examples up for you to check from the original post:
(a) the non react build
(b) the react build

[iAMkVIN-S]

@jeffreylanters Would you like me to do any additional tests in order to help you debug the issue?

Cheers

[kamend]

I am having exactly the same problem with a react build. Tried both latest Chrome and Safari, they both freeze, I guess there is a never ending cycle somewhere, but I was not able to figure it out.

[jeffreylanters]

Hi guys, sorry I've been really busy lately and could not find the time to reply faster. Could you try to run the test environment and validate if this also fails to run in the same environment? If not, could you try to replace the Unity build with your own Unity build? Thanks! Keep me posted.

[kelvin0x27]

yeah , i have a similar problem , when i back previous page and go to page unity game more than 5 times , that will crash page ? .any help me ?

[kamend]

@jeffreylanters just tested the test environment and it works fine, but I noticed something else, when I tried running my version in Firefox, there is some looping around setting the resolution, but to be honest I don't know where it is coming from, I will try to investigate this

[kamend]

Ok, in order to fix the problem, you need to add some sizing CSS to the Unity component, like in the test environment.

.unity-canvas { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; }

But the question why that loop above happens, remains.

[github-actions]

This issue is stale because it has been open for 30 days with no activity.

[github-actions]

This issue was closed because it has been inactive for 14 days since being marked as stale.

[windsome]

I got the same problem, found the cause is .gz suffix. add '.gz' to dataUrl and codeUrl will fix it.

  const { addEventListener, removeEventListener, unityProvider } = useUnityContext({
    loaderUrl: "/Build/WebBuild.loader.js",
    dataUrl: "/Build/WebBuild.data.gz",
    frameworkUrl: "/Build/WebBuild.framework.js",
    codeUrl: "/Build/WebBuild.wasm.gz",
  });