Regression in 8.x: canvas size no longer adjusts with available space

Describe the bug We’re trying to move to an Unity 2020.1 build. Therefore I upgraded to v8.x and made the necessary changes to the application.

One of our Unity components is wrapped together with another (optional) div in a parent that covers the whole window. The 2nd div is rendered dynamically based on its React component visibility state (think of a side-bar pop-up window), i.e. roughly this structure:

<div
  style={{
    display: 'flex',
    flexDirection: 'row',
    height: '100%',
    width: '100%',
  }}
>
  <Unity unityContext={...} width="100%" height="100%" />
  {<div .... > .... some content ... </div>} // or "null" when invisible...
</div>

• 2nd div not rendered: resizing the browser works nicely, i.e. the Unity canvas always resizes to the available space
• 2nd div rendered: canvas width does not change
  • i.e. the browser renders a horizontal scroll bar and both elements are rendered side-by-side
  • this forces the user to scroll to the right to make the contents of the 2nd div visible.
  • in the example I’m looking at I see in the browser element inspector <canvas width="1272" ... >
  • if I now change the the width in the inspector manually to some value between 0 to 820 then the canvas recalculates to width="821", which is apparently the correct size to display the canvas and the 2nd div without a horizontal scroll bar
  • when I close the 2nd div again, the canvas recalculates again to width="1272" and thus fills the width of the window again
  • as far as I can tell only the case of shrinking the canvas width automatically isn’t working

Expected behavior Unity canvas should resize to available space in the parent

Desktop (please complete the following information):

• OS: Fedora 32
• Browser: Chromium 84

Additional context This worked without problems for the same web app/Unity components using an Unity 2019 build and 7.x.

I first thought that this might be caused that the enabling of the 2nd div doesn’t trigger a re-render of the Unity component. But even after changing the code to ensure a re-render, the canvas size is not adjusted. I think this is because there are no prop changes as the width/height are hard-coded to 100%, i.e. either React or react-unity-webgl doesn’t consider this a “component has been updated” case.

• I also tried <Unity width="auto" ... > but then the canvas no longer resizes when I make the browser window wider. It stays at the original width and the right hand side of the browser window is a blank white space.
• <Unity width="-webkit-fill-available" ... > seems to behave like the 100% variant.

[stefanb2]

BTW: such an upgrade page might also be the right place to mention that the resized event has been removed.

[jeffreylanters]

Thank you. I’ve updated the documentation