[ANGULAR] html2canvas breaks after upgrading to 7.2.3 — CSS color() function not supported by html2canvas parser

[rayudu.pasumarthy]

Hi Team,

We recently upgraded from Bryntum Gantt 7.1.3 to 7.2.3 and encountered a breaking issue with our screenshot/image capture functionality that uses html2canvas.

Issue
After upgrading to 7.2.3, html2canvas completely fails to capture screenshots of any page containing the Bryntum Gantt component. The following error is thrown:

Error: Attempting to parse an unsupported color function "color"
at html2canvas.min.js
Root cause
Bryntum 7.2.3 appears to have introduced CSS Color Level 4 syntax (color() function) in its stylesheets — for example:

color(display-p3 0.22 0.51 0.82)
html2canvas does not rely on the browser to resolve styles — it re-parses all active CSS stylesheets using its own internal CSS parser. That parser does not support the color() function and throws an unhandled exception the moment it encounters one, aborting the entire capture process.

This was not an issue in 7.1.3, as the color() function was not present in those stylesheets.

Impact
Any application using html2canvas alongside Bryntum Gantt/Scheduler will silently break after upgrading to 7.2.3. Screenshot capture produces no output.

Workarounds we applied
We have applied two temporary workarounds on our side:

Temporarily disable stylesheets containing color( before calling html2canvas, then re-enable them immediately after the capture completes.
Patch html2canvas.min.js directly — modify the internal color parser to return a transparent fallback (0,0,0,0) instead of throwing on unsupported color functions.
Both approaches are fragile and introduce maintenance overhead, which is why we would prefer an upstream solution.

Questions / requests
Was the introduction of color() in 7.2.3 stylesheets intentional?
Is there a Bryntum-recommended approach for capturing a screenshot of the Gantt that avoids this conflict?
Would you consider providing a CSS fallback/compatibility option for environments that rely on html2canvas or similar DOM-to-canvas libraries?
This is particularly important for customers who do not have error monitoring (e.g. Sentry) in place and rely on screenshot-based exception reporting. The failure is silent — no visible error surfaces to end users — making it difficult to detect without explicit testing.

Thank you for your time.

Environment
Bryntum Gantt 7.1.3 → 7.2.3

[johan.isaksson]

Hi,

Thanks for reporting. Does it give any more details on where it encountered it? I searched the CSS for our latest version of Gantt (7.3.0) for usage of color( and found none.

[rayudu.pasumarthy]

Hi Johan,

The function in your CSS isn't color() — it's color-mix().

Your stylesheets don't author the color() function directly, so grepping for color( won't find anything. What they do contain is extensive use of color-mix() (and a few oklch() / lab()). For example, gantt.css alone has 136 instances such as:

color-mix(in srgb, var(--b-primary), var(--b-mix) 98%)
The reason this surfaces as a color() error is the way html2canvas works:

html2canvas does not read your authored CSS text — it reads the browser's computed styles via getComputedStyle().
Chrome (111+) serializes the resolved value of color-mix() / oklch() / wide-gamut colors into the CSS Color Level 4 color() function form, e.g. color(srgb 0.22 0.51 0.82).
html2canvas's bundled color parser has no implementation for color(), so it throws "Attempting to parse an unsupported color function 'color'" and aborts the capture.
So the color() in the error message is a browser-generated computed value of your color-mix() rules, not a string that appears anywhere in your source CSS.

Could you re-check using these search terms instead: color-mix(, oklch(, oklab(, lab(, lch(. You should find plenty in the Gantt theme CSS.

To confirm the exact selectors on your end, this snippet run in the browser console on a Gantt page lists every loaded rule using these functions:

for (const sheet of document.styleSheets) {
  let rules; try { rules = sheet.cssRules; } catch { continue; }
  for (const r of rules) {
    if (/color-mix\(|oklch\(|oklab\(|[^-]lab\(|[^-]lch\(/.test(r.cssText)) {
      console.log(sheet.href || '(inline/injected)', '→', r.selectorText, '::', r.cssText.slice(0, 200));
    }
  }
}

Our requests therefore stand:

Was the move to color-mix() / oklch() based theming intentional, and is it expected to remain in future releases?
Is there a Bryntum-recommended way to capture a screenshot of the Gantt that avoids the computed color() serialization?
Would you consider a build or runtime option to emit DOM-to-canvas-compatible color values (legacy rgb()/rgba()) for environments that rely on html2canvas or similar libraries?
This remains important for customers without error monitoring who depend on screenshot-based exception reporting — the failure is silent, with no error visible to end users.

For now we've kept our two interim workarounds in place (temporarily disabling stylesheets containing these functions before capture, and patching the html2canvas color parser to fall back to transparent), but we'd much prefer an upstream solution.

Thanks again for your help.

Best regards,
Rayudu

[ahmadzaheer]

Hello,

Thanks for pointing out. We are currently digging in this issue and hopefully will get back to you soon regarding this.

Was the move to color-mix() / oklch() based theming intentional, and is it expected to remain in future releases?

Yes, I can confirm the introduction of color-mix was intentional. These were introduced in v7.0.0 when we introduced new themes.

Is there a Bryntum-recommended way to capture a screenshot of the Gantt that avoids the computed color() serialization?

Have you tried the print feature of gantt? https://bryntum.com/products/gantt/docs/api/Gantt/feature/export/Print

Would you consider a build or runtime option to emit DOM-to-canvas-compatible color values (legacy rgb()/rgba()) for environments that rely on html2canvas or similar libraries?

We will get back to you on this soon.

Thanks for your patience!

[ahmadzaheer]

Hello,

Would you consider a build or runtime option to emit DOM-to-canvas-compatible color values (legacy rgb()/rgba()) for environments that rely on html2canvas or similar libraries?

We are going to continue using the color-mix and CSS color module level 4.

I have tried a few alternatives to html2canvas and have found snapdom library suitable. I have tried converting to different output formats on some of our gantt's examples and it is working fine. Can you please try this and let us know if it works for you.

Hope this helps.