Mac M1 Processor + Chrome Browser v105 = Inconsistent HTML5 Canvas Element

Question

TL;DR Canvas Elements not showing up for some sites and does show for others. How can I have it show consistently?

I have a 2021 Macbook Pro with an Apple M1 Pro processor. I use Chrome Browser v105.0. On some sites that use the HTML5 canvas element, I am able to see stuff being drawn on the canvas but for other sites, the canvas element is clearly there but nothing is drawn on it. I tried playing with the chrome://flags that have to do with GPU and Canvas by switching them on and off to see if I can get Canvas Elements showing up consistently and now they do show for the sites that it was not working for but only after refreshing the page.

Has any one experienced this before and if so, is there a way that I can have canvas elements show consistently without all the workaround?

Answer 1

The problem is fixed with Google Chrome v107. Topic can close.

Answer 2

I am experiencing the same issue with HTML5 canvas on Chrome M1, seems to be related to Apple Silicon (M1) + Chrome 105 because it's working fine on Chrome v105, on a Windows/MacOs Intel computer. It is fixable (on your client only) by disabling the 'Out-of-process 2D canvas rasterization' flag on chrome://flags. Still waiting Google to fix this issue as it is a breaking issue.

Edit : tested on Chrome Beta (v106.0.5249.30) and the issue is still present

Answer 3

We experience the same problem (only with the Apple M1 processor, Apple M2 not tested). We developed an app using the canvas element. It worked fine with Apple M1 and Chrome (till v104). When Chrome v105 was launched the problem started and the canvas element didn't draw anything anymore. The problem only occurs when the flag accelerated 2d canvas is enabled. When this flag is disabled the canvas works fine again. This is a breaking issue and should be fixed by Google. Everything works fine in the latest version of Safari and Firefox with acceleration enabled.