WebGL error on some machines: Unity is creating larger and larger offscreen FBOs and eventually fail

Questions & Answers
1

Hello, I have Unity Editor 2021.2.11f1c1. It’s an URP project.

My WebGL build is running well on one machine (a 1050ti laptop), but fails on other two machines (One with APU and one with Intel Graphics) there are errors.

On those two machines they all have similar warnings:

Performance Warning: Recreating Offscreen FBO (500x250 => 625x313)
Performance Warning: Recreating Offscreen FBO (625x313 => 781x391)

… a lot of them till

Performance Warning: Recreating Offscreen FBO (17760x8899 => 22200x11124)
RenderTexture.Create failed: requested size is too large.
RenderTexture.Create failed: requested size is too large.

And I find a very large canvas appears in my browser.

After some experiment, I find this error is not related to servers or browsers. It only appears when browser scale or system dpi is not 100%. So weird.

2

I find the reason. I’m not good at HTML and JS. The canvas I created is too large.

I am using the following to set the size of a canvas:

canvas.width = 800;
canvas.height = 600;

The width and height are without unit. At 100% zoom their unit is ‘px’. But at non-100%, they seem to have a different unit (don’t know which and why), resulting a too large canvas.

The following way with explicit unit is OK for all zoom levels:

canvas.style.width = '800px';
canvas.style.height = '600px';
3

Using editor v 2021.3.22f1. I was able to fix this by uncommenting the
config.matchWebGLToCanvasSize = false;
line in the given html file.