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

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.

[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.

[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.