Error when zooming out on Chrome/Firefox

Questions
, ,
1

I recently noticed that if you zoom out on a web page that contains three.js content, an error will come up in console after zooming out past about 33% and refreshing the page. To be clear I am referring to browser zoom (i.e. ctrl -). You can try it for yourself on any three.js page like three.js examples

In Chrome:

Uncaught DOMException: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The image argument is a canvas element with a width or height of 0.

In Firefox:

Uncaught DOMException: CanvasRenderingContext2D.drawImage: Passed-in canvas is empty

This also makes whatever three.js content is on the screen unusable. Any idea why this occurs? Is this an issue beyond three.js?

2

On my laptop, zooming out works fine. The browser prevents me from zooming out past 25–30%, but there are no issues visible there. I wonder if the page is eventually trying to resize the WebGL canvas to a resolution that your device (GPU or driver) cannot support?

If this is a problem affecting an application you’re working on, it might be worth trying to clamp the WebGL canvas resolution at some point (e.g. ≤4096px) and just scaling the HTML element beyond that.

2 Likes
3

Interesting. I should have mentioned that the error occurs only on refresh with the zoom that far out. Does the issue still not occur for you?

4

Works fine on my laptop after refresh as well :man_shrugging:

5

I’m also not able to reproduce the error in Chrome on my iMac.

6

Apologies, I should have listed my environment…

This is happening on Ubuntu 22.04 and Chrome 105.0.5195.125

Here’s a video of it happening (don’t know why it’s so laggy). This was observed on Ubuntu 20.04 on the same version of Chrome as well.

7

If you can reproduce a graphics issue with more than one browser, the root cause is probably a buggy GPU driver.

We have observed multiple GPU driver related issues in the past on Ubuntu (and Linux in general). Sometimes the issues can be fixed by updating the drivers. Sometimes not and the issue should be reported to the driver’s vendor.

Also consider to file a bug at the browser’s bug tracker. At least in the Chromium project, the devs can redirect GPU driver related issue to dedicated contacts at Intel, Qualcomm etc…

1 Like