Hacktoberfest 2026: le issue che i maintainer hanno segnato per ottobre, aperte e adatte ai principianti. Sfoglia le issue Hacktoberfest

Cannot read properties of null (reading 'ownerDocument') in getComputedStyle when canvas is detached during a pending debounced resize

Aperta
  • Qualcosa non va?
#12,312 0 commenti 0 reazioni 0 assegnatari Vedi su GitHub

I maintainer di solito rispondono entro 1 giorno

@Yahiro025 ci sta già lavorando.

Dal 18/9/2026.

  • #1 di @Yahiro025 — aperta
  • #12314 di @Yahiro025 — aperta

Valutazione

Difficoltà
3/5
Tempo stimato
1-2 giorni
Idoneità per principianti
58/100
Tipo di issue
Bug
Chiarezza
Abbastanza chiara
Stato di attività
Attiva
Stack tecnologico
javascript, typescript
Ambito
frontend, web-dev

Direzione di ricerca

Start in helpers.dom.ts and platform.dom.js, tracing getComputedStyle and getMaximumSize through Chart._resize and the debounced resize callback. Compare the proposed guards with the approach from #11809 and check the related getContainerSize and getRelativePosition paths. Done means a detached canvas during pending resize or teardown no longer throws the reported ownerDocument error.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

Description

getStyle/getComputedStyle in helpers.dom.ts (called via getMaximumSize → DomPlatform.getMaximumSize) assumes the canvas element passed to it is never null. When a chart's canvas has already been removed from the DOM but resize()/update() still fires afterward, this throws:

TypeError: Cannot read properties of null (reading 'ownerDocument')

Stack (minified names resolved from source):

getComputedStyle (helpers.dom.ts)
  → getMaximumSize (helpers.dom.ts)
  → DomPlatform.getMaximumSize (platform.dom.js)
  → Chart._resize
  → Chart.detached
  → bindResponsiveEvents
  → bindEvents
  → _checkEventBindings
  → Chart.update
  → this._doResize (debounced resize callback)

Reproduction path

We hit this in a React app (via react-chartjs-2) using resizeDelay (a debounced resize). Sequence:

  1. Chart mounts; the constructor's resize path schedules a debounced _doResize because resizeDelay > 0.
  2. Before that debounce timer fires, the component unmounts and React removes the canvas from the DOM (destroy() runs, but the pending timer isn't always guaranteed to lose its race depending on framework/container teardown order).
  3. The debounced callback fires anyway, update() → _doResize → detached() → bindResponsiveEvents() → platform.getMaximumSize(canvas, ...) → getComputedStyle(canvas), and canvas is null/detached at this point → element.ownerDocument throws.

Prior art

This is the same failure #11809 (https://github.com/chartjs/Chart.js/pull/11809) fixed, reported against chart.js 4.4.3. That PR was closed without merging — not because the approach was rejected outright (a maintainer only commented the "return semi-default values" approach felt a bit hacky and asked whether the repro could be narrowed to the container-removal case), but because the author's team moved away from Chart.js before the discussion concluded. The underlying bug was never fixed.

We independently reproduced the identical stack trace and error message against the current latest release, chart.js 4.5.1, confirming it is still present.

Our workaround

We removed our own use of resizeDelay entirely, since a debounced resize is what creates the race between "component removed" and "debounced resize still pending." That avoids the crash for us, but the underlying null-check gap in getComputedStyle/getMaximumSize (and the related spots #11809 touched: getRelativePosition, getContainerSize) remains for anyone else hitting a similar teardown race through a different path (e.g. responsive: true without resizeDelay, combined with fast unmounts during an in-flight ResizeObserver callback).

Suggested fix

Re-open/revive the approach from #11809: guard getComputedStyle/getMaximumSize/getContainerSize/getRelativePosition against a missing canvas (optional chaining + sensible defaults), as that PR's diff already implements.

Environment

  • Chart.js: 4.5.1
  • Browser: reproduced in Chromium (Playwright) and in production (real user reports, Chrome/Edge on Windows)
Lingua principale
JavaScript
Stelle
67.8k
Fork
12k
Merge medio
1g 12h
PR unite (30g)
5

Preparare l'ambiente

  • Nessun Dockerfile né file Docker Compose
  • Ha un modello di pull request
  • Nessuna guida per i contributori

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di chartjs/Chart.js

Tutte le issue di chartjs/Chart.js

Issue simili

Altre issue su JavaScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.