bug: NS_ERROR_FAILURE in Firefox 105, when `.fillText` is called on `canvas`'s context, inside `ion-content`

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

• v4.x
• v5.x
• v6.x
• Nightly

Current Behavior

Originally, the issue was showing itself by throwing an error in chart.js library (ref: chartjs/Chart.js#10720), when the chart.js chart was being drawn into the canvas element, which is inside the ion-content element.

But further investigation of mine shown that the issue is related to the canvas element being inside ion-content element. If one would like to write an text using .fillText, or even change font styling by using .font results in NS_ERROR_FAILURE.

ngAfterViewInit() {
  const ctx = this.canva.nativeElement.getContext('2d');

  ctx.fillText('Hello, world', 10, 10);
}

If the canvas element is not a child of ion-content, then it works just fine.

Expected Behavior

Text-related actions on canvas 2d context should not throw an error

Steps to Reproduce

1. Generate Ionic + Angular project
2. Create canvas element inside ion-content element, in the Ionic Page
3. Add selector (e.g. #canva) to the canvas element
4. Query the element by Angular’s ViewChild
5. Get 2d context in Angular’s ngAfterViewInit
6. Call .flllText('hello, world', 10, 10) on 2d context

Expected: hello, world is visible Actual: An error is thrown

Code Reproduction URL

https://stackblitz.com/edit/angular-ivy-pyvhyk?file=src/app/pages/index/index.page.ts

Ionic Info

Reproduced in stackblitz environment, see above (newest Angular and newest Ionic)

ionic info from my project, from which originally I had issue:

$ ionic info

Ionic:

   Ionic CLI                     : 6.20.1 (/home/tomek/.nvm/versions/node/v14.17.6/lib/node_modules/@ionic/cli)
   Ionic Framework               : @ionic/angular 5.6.11
   @angular-devkit/build-angular : 0.1102.14
   @angular-devkit/schematics    : 9.1.12
   @angular/cli                  : 11.2.14
   @ionic/angular-toolkit        : 2.3.3

Capacitor:

   Capacitor CLI      : 3.1.1
   @capacitor/android : 3.1.1
   @capacitor/core    : 3.1.1
   @capacitor/ios     : 3.1.1

Utility:

   cordova-res                          : not installed globally
   native-run (update available: 1.7.1) : 1.4.0

System:

   NodeJS : v14.17.6 (/home/tomek/.nvm/versions/node/v14.17.6/bin/node)
   npm    : 6.14.15
   OS     : Linux 5.10

Additional Information

It only happens on Firefox 105. Previous Firefox (probably? see mozregression results) versions were working fine. Tested on Windows 10 machine, I don’t know if it also happens on Linux and MacOS.

Users of chart.js report that the issue happens to them on react ionic as well.

Running mozregression on the stackblitz above gave following results:

mozgregression results

2022-09-29T14:42:57.958000: INFO : application_display_name: Firefox Nightly
2022-09-29T14:42:57.958000: INFO : application_id: {ec8030f7-c20a-464f-9b0e-13a3a9e97384}
2022-09-29T14:42:57.958000: INFO : application_name: Firefox
2022-09-29T14:42:57.958000: INFO : application_remotingname: firefox
2022-09-29T14:42:57.958000: INFO : application_repository: https://hg.mozilla.org/integration/autoland
2022-09-29T14:42:57.958000: INFO : application_vendor: Mozilla
2022-09-29T14:42:57.958000: INFO : application_version: 96.0a1
2022-09-29T14:42:57.958000: INFO : platform_buildid: 20211116165611
2022-09-29T14:42:57.958000: INFO : platform_changeset: 5aa4d866a171d9cb0502678028667d987cb3d534
2022-09-29T14:42:57.958000: INFO : platform_repository: https://hg.mozilla.org/integration/autoland
2022-09-29T14:42:57.958000: INFO : platform_version: 96.0a1
2022-09-29T14:43:11.136000: INFO : Narrowed integration regression window from [9afe4618, 33a125a2] (3 builds) to [9afe4618, 5aa4d866] (2 builds) (~1 steps left)
2022-09-29T14:43:11.151000: DEBUG : Starting merge handling...
2022-09-29T14:43:11.151000: DEBUG : Using url: https://hg.mozilla.org/integration/autoland/json-pushes?changeset=5aa4d866a171d9cb0502678028667d987cb3d534&full=1
2022-09-29T14:43:11.152000: DEBUG : redo: attempt 1/3
2022-09-29T14:43:11.152000: DEBUG : redo: retry: calling _default_get with args: ('https://hg.mozilla.org/integration/autoland/json-pushes?changeset=5aa4d866a171d9cb0502678028667d987cb3d534&full=1',), kwargs: {}, attempt #1
2022-09-29T14:43:11.160000: DEBUG : urllib3.connectionpool: Resetting dropped connection: hg.mozilla.org
2022-09-29T14:43:12.465000: DEBUG : urllib3.connectionpool: https://hg.mozilla.org:443 "GET /integration/autoland/json-pushes?changeset=5aa4d866a171d9cb0502678028667d987cb3d534&full=1 HTTP/1.1" 200 None
2022-09-29T14:43:12.502000: DEBUG : Found commit message:
Bug 1483798 - Avoid returning the computed styles of nodes that aren't in the flat tree. r=xidorn
As per spec. This could cause wrong styles to be returned because we
fill the bloom filter based on flat tree ancestors, which was ultimately
the root cause of bug 1737131.
Differential Revision: https://phabricator.services.mozilla.com/D131074
2022-09-29T14:43:12.502000: DEBUG : Did not find a branch, checking all integration branches
2022-09-29T14:43:12.504000: INFO : The bisection is done.
2022-09-29T14:43:12.505000: INFO : Stopped

I’ve tried to reproduce the issue by using raw HTML custom element and slot, but it worked just fine:

https://stackblitz.com/edit/js-7vrflj?file=index.js

I also tried to reproduce the issue by using vanilla js Ionic version, but I was unable to. See the code below:

Vanilla JS code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core/dist/ionic/ionic.esm.js"></script>
  <script nomodule src="https://cdn.jsdelivr.net/npm/@ionic/core/dist/ionic/ionic.js"></script>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core/css/ionic.bundle.css" /></head>
<body>
  <ion-app>
    <ion-router>
      <ion-route url="/" component="test-canvas"></ion-route>
    </ion-router>
    <ion-router-outlet></ion-router-outlet>
  </ion-app>
  <script>
    class TestCanvas extends HTMLElement {
      #shadowRoot;
      constructor() {
        super();
        this.#shadowRoot = this.attachShadow({ mode: ‘open’ });
        this.#shadowRoot.innerHTML = `
          <ion-content>
            <ion-content>
              <canvas id=“app” style=“width: 100px; height: 100px”></canvas>
            Hello, world!
            </ion-content>
          </ion-content>
        `;
        /** @type {HTMLCanvasElement} */
        const canvas = this.#shadowRoot.getElementById(‘app’);
        const ctx = canvas.getContext(‘2d’);
        ctx.fillText(‘hello, world’, 10, 10);
      }
    }
    customElements.define(‘test-canvas’, TestCanvas);
  </script>
</body>
</html>

[liamdebeasi]

Thanks for the report. I can reproduce this issue with Firefox 105, however this does not appear to be an Ionic issue. Firefox 104 does not reproduce the issue, indicating that this may be a regression. A couple things I discovered:

1. This issue happens on any Shadow DOM component, not just ion-content. (Non-shadow DOM components do not reproduce the issue).
2. Wrapping the canvas code in a setTimeout avoids the issue.

I’ll keep digging to see if I can narrow this issue down further.

[liamdebeasi]

Hi everyone,

I was able to isolate the issue. This problem appears when drawing on a canvas passed to a Shadow DOM component that does not have a <slot>. Stencil renders the <slot> for a component asynchronously, so there is a time between when the component has been upgraded to use the Shadow DOM and when it has <slot> added to the DOM. During this time, the canvas code executes which triggers this bug.

Full details are available on https://bugzilla.mozilla.org/show_bug.cgi?id=1792860#c3.

I am going to close this as this is not a bug in Ionic. I recommend following the Bugzilla thread above for updates. Thanks for the report!