Crashing on Android Browsers about canvas-size

[followbl]

@jhildenbiddle extremely detailed response - makes total sense what you laid out. Will test out your solution and report back for 💩 's and giggles

[jhildenbiddle]

Thanks for filing the issue, @followbl. Happy to take a look at this. Let me see what I come up with over the weekend and I'll report back.

[jhildenbiddle]

Apologies for the delayed response, @followbl.

In my limited testing with the Pixel 5 VM on BrowserStack I experienced inconsistent results: both the JSBin and CodeSandbox demos failed and completed successfully when reloaded several times. Here are the results of my testing:

🎉 Test 1: PASS (Pixel 5 VM + JSBin demo)

⚠️ Test 2: FAIL (Pixel 5 VM + Codesandbox demo)

🎉 Test 3: PASS (Pixel 5 VM + Codesandbox demo)

Given these inconsistent results, my assumption would have been that the Browserstack VM is not as reliable as testing on real hardware. Since your users are experiencing issue on real hardware I can only assume that platform itself is unstable when rendering large canvas elements. This isn't totally unexpected given the hardware limitations on mobile devices and the RAM requirements of rendering large in-memory canvas elements.

Fortunately, there is an easy fix: limit the maximum canvas size used for testing. Since this issue is only affecting mobile devices, use the mobile test results available in the README.md to find a suitable max value.

const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);

const canvasLimitation = await canvasSize.maxArea({
  max: isMobile ? 8192 : null,
  usePromise: true,
  useWorker: false,
});

Using this approach I was able to reload a modified JSBin demo multiple times without issue.

• https://jsbin.com/zufiralaja/1/edit?js,output

Hope this helps!