Closed Bug 1792860 Opened 2 years ago Closed 1 year ago

NS_ERROR_FAILURE in Firefox 105, when .fillText is called on canvas's context, inside element with shadow DOM


(Core :: Graphics: Canvas2D, defect)

Firefox 105



114 Branch
Tracking Status
firefox114 --- fixed


(Reporter: github, Assigned: emilio)




(3 files)

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

(stackblitz:, I couldn't find proper reproduction steps which wouldn't use Ionic)

Related issues with libraries:

Actual results:

If one would like to write a text using .fillText, or even change font styling by using .font in the canvas element, it results in NS_ERROR_FAILURE.

Expected results:

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

The Bugbug bot thinks this bug should belong to the 'Core::Graphics: Canvas2D' component, and is moving the bug to that component. Please correct in case you think the bot is wrong.

Component: Untriaged → Graphics: Canvas2D
Product: Firefox → Core

I am seeing this same error within an Angular & ionic app but with amchart tooltip text instead.

Attached file Code reproduction

I was able to reproduce the issue outside of Ionic. The reported issue appears when trying to draw on a canvas passed to a Shadow DOM custom element that does not have a <slot>.

  1. Open attached code reproduction in Firefox 105+.
  2. Open developer tools.
  3. In the "Inspector" tab observe that there is a <canvas> element inside of a custom element named <my-cmp>.
  4. Observe that the reported error is in the console.
  5. In the custom element constructor, add root.innerHTML = '<slot></slot>';.
  6. Reload the page. Observe that the error is no longer present and the canvas is drawn correctly.

This issue was happening in Ionic because Stencil, the Web Component compiler that Ionic uses, was adding the <slot> asynchronously. As a result, there was a period where the custom element had been upgraded to use the Shadow DOM, but the component's slot had not yet been added to the DOM.

The severity field is not set for this bug.
:lsalzman, could you have a look please?

For more information, please visit auto_nag documentation.

Flags: needinfo?(lsalzman)
Flags: needinfo?(lsalzman)
Severity: -- → S3

I've encontered the same error using Ionic React and Chart.js

When could one expect that this bug will be fixed? There is no Priority set.

This happens because we up checking the pref layout.css.computed-style.styles-outside-flat-tree via nsComputedDOMStyle::GetComputedStyle. That was introduced quite intentionally it seems in bug 1483798. Emilio is that behavior expected?

Flags: needinfo?(emilio)
See Also: → 1483798

Yes, there's no style for those elements per spec, but we shouldn't throw.

Flags: needinfo?(emilio)

When an element is out of the flat tree we should treat it the same as
when it is out of the document, it has no meaningful style.

Assignee: nobody → emilio
Ever confirmed: true
Pushed by
Deal better with canvases without styles. r=lsalzman,gfx-reviewers
Created web-platform-tests PR for changes under testing/web-platform/tests
Pushed by
Keep checking for shell destruction.
Closed: 1 year ago
Resolution: --- → FIXED
Target Milestone: --- → 114 Branch
Upstream PR merged by moz-wptsync-bot
QA Whiteboard: [qa-114b-p2]
You need to log in before you can comment on or make changes to this bug.