WebGL Build cutting out top and bottom of UI Canvas elements

Hi everyone just to start this off I want to say I do not intend to monetize this project, I am using these pokemon sprites and doing this as a learning experience.

The issue that I am having is that when I build to WebGL, the game looks great when on full screen on most resolutions however when it is in windowed mode it cuts off the top and bottom of the screen

Things I already have/have tried:

  1. Canvas is set to scale with screen size (1920x1080) which is what my game view was in for development
  2. In Build → Player Settings the default width and height is 1920x1080

I think the issue has something to do with the default scale in unity. When I press play the game view has 2 black bars on the side and I need to scale inward to 1x to get the game to look right. Should I just rebuild my UI to look good at 1080p 1x scale? I’m not sure why unity would automatically scale me out with letterboxes in this case.

This may be due to the fact your canvas might be set to only scale based on width. I only say this because your left and right sides look proper in both, however the top and bottom is what changes in screen size from full screen to windowed. In the inspector for your canvas, you can go to the slider for ‘Match’ and set this to 0.5, see if this fixes the issue, Of course you can always mess with this as well to see what may produce a better result. 155498-untitled.png

I’ve got the exact same problem here. Have you managed to find a solution? I also used the responsive plugin from the asset store but I still got these 2 lines on the right and left side.