fix(ui): avoid gantt annotation error during resize

[yuseok89]

When clicking the DAG task icon to open the task view, I intermittently hit a Chart.js error:

The stack trace points into chartjs-plugin-annotation’s beforeDraw hook while rendering the Gantt chart

According to Chart.js / annotation plugin issue reports, this error commonly occurs when resizeDelay is set, because the annotation plugin can run during a resize before chartArea is fully initialized, making chartArea.left undefined. Our Gantt chart options were using resizeDelay: 100 together with the annotation plugin, which matches this pattern. To avoid this resize race while preserving the existing annotation/highlight behavior, I removed the resizeDelay setting so the chart resizes immediately without triggering that crash.

---

Was generative AI tooling used to co-author this PR?

• Yes (please specify the tool below)

---

• Read the Pull Request Guidelines for more information. Note: commit author/co-author name and email in commits become permanently public when merged.
• For fundamental code changes, an Airflow Improvement Proposal (AIP) is needed.
• When adding dependency, check compliance with the ASF 3rd Party License Policy.
• For significant user-facing changes create newsfragment: {pr_number}.significant.rst or {issue_number}.significant.rst, in airflow-core/newsfragments.

[bbovenzi]

Can you walk me through how exactly you got this error? I would like to replicate first.

[yuseok89]

Screen.Recording.2026-01-22.at.9.27.19.PM.mov

Sorry for the brief description earlier.
The video demonstrates the exact steps. I encountered this error when running from the main branch with Breeze, which led to this PR. If reproduction is difficult on your end, I can do more testing to pinpoint the exact conditions that trigger it.

[choo121600]

I think code looks reasonable to me, but I tried on main and can't reproduce(Chrome, arc browser) 🥲
Do you happen to know which browser this occurs on?

[yuseok89]

@bbovenzi @choo121600
Sorry for the confusion. I didn’t look closely enough at first, and I might have sent you in the wrong direction.
I think I had Show Gantt enabled. After that, clicking a run always takes me to the error screen. The attached video shows the exact steps to reproduce. If you can’t reproduce it on your side(and it’s specific to my setup), tell me and I’ll run a few more tests to narrow it down.

Screen.Recording.2026-01-24.at.10.43.29.PM.mov

[guan404ming]

I can't reproduce as well but I think that might be some kind of race condition between the initiation of chartArea and the resize based on the screenshot.

Could you help try set clip: false and test? Since when resizeDelay is set, the annotation plugin can attempt to render during a resize event before the chartArea is fully initialized. I think by setting clip: false could tell the plugin to skip clipping calculations that depend on chartArea boundaries, which maybe can prevent the crash during resize operations when chartArea might not be ready yet.

it might be like this

plugins: {
      annotation: {
        clip: false,

reference

• https://www.chartjs.org/chartjs-plugin-annotation/latest/guide/configuration.html#top-level-options
• https://github.com/chartjs/chartjs-plugin-annotation/blob/master/docs/guide/configuration.md

[yuseok89]

@guan404ming
That makes sense, thanks for the suggestion. I didn’t initially realize this was likely a race condition, but your comment helped a lot.

I’ve applied clip: false on the annotation plugin while keeping resizeDelay set to 100, and in my tests the Gantt chart now works as expected without triggering the left error. This feels like a better trade-off than removing resizeDelay, because it keeps the existing resize behavior while still avoiding the annotation crash.

For reference, here is the environment where I tested this change (including re-testing with Safari):

• macOS 14.4, Apple M2, 8 GB RAM
• Airflow from main using Breeze
• Chrome 144: I could reproduce the left error before this change. It looks like some kind of race condition, although I haven’t fully understood all the details yet.
• Safari (same machine): no left error (but the Gantt chart doesn’t render as an expected Gantt view, which seems like a separate issue).

[guan404ming]

Please resolve the ci error, thanks!

Nice, thanks for the tests. I don't think to add the clip: false would increase lots of overhead here. In my 2 cent, I think we could merge this since it somehow fix the potential issue we might confront in some point.

wdyt @bbovenzi @choo121600

[choo121600]

Nice, thanks for the tests. I don't think to add the clip: false would increase lots of overhead here. In my 2 cent, I think we could merge this since it somehow fix the potential issue we might confront in some point.

wdyt @bbovenzi @choo121600

I agree with this take as well.
If we can resolve the static check failure, I think this should be good to merge 👍

[bbovenzi]

Yeah sounds like low overhead even though iI still can't replicate on my end. But we need to fix the ordering linting issue. Should be as simple as running pnpm format

[yuseok89]

Thanks everyone for the review and helpful suggestions! I learned a lot from this discussion. The formatting issue has been resolved.

[choo121600]

Cool, Thanks :)

[github-actions]

Backport successfully created: v3-1-test

Status	Branch	Result
✅	v3-1-test