Error: Attempting to parse an unsupported color function "color"

[aeharding]

Please make sure you are testing with the latest release of html2canvas.
Old versions are not supported and issues reported for them will be closed.

Please follow the general troubleshooting steps first:

• You are using the latest version
• You are testing using the non-minified version of html2canvas and checked any potential issues reported in the console

Bug reports:

Parsing elements with the color() function fails in Safari.

In Safari (14 and 15 tested), see the canvas is not rendered, and the error Error: Attempting to parse an unsupported color function "color" is printed to console:

https://jsfiddle.net/g1vxbwso/

Specifications:

• html2canvas version tested with: 1.3.2
• Browser & version: Safari (14/15)
• Operating system: MacOS Big Sur

[alex-e-leon]

This is also true for other new color functions from CSS Color Module Level 4 which now have wide browser support like oklab and oklch.

Note that even if there is a non oklch fallback color, html2canvas still errors if it sees un unsupported color function

[yorickshan]

use https://www.npmjs.com/package/html2canvas-pro, it works! If you found this helpful, don't forget to leave a star 🌟.

[yourpeng]

I got the same error today utill it works in chrome traceless mode. when I turn off the browser extensions named "ModHeader", it works

[makueiathiengdit]

I'm getting below error when I try to use html2canvas and daisyUI

Error: Attempting to parse an unsupported color function "oklch"

daisyUI 4.10.5
html2canvas 1.4.1

[enjoijkee]

@yorickshan it doesn't unfortunately

[devrocha]

I'm getting below error when I try to use html2canvas and daisyUI

Error: Attempting to parse an unsupported color function "oklch"

daisyUI 4.10.5 html2canvas 1.4.1

Did you manage to solve it? I'm having the same issue. I'm not even using html2canvas directly, just jspdf.html (which uses html2canvas)

[PunithDandluri]

I'm getting below error when I try to use html2canvas and daisyUI

Error: Attempting to parse an unsupported color function "oklch"

daisyUI 4.10.5 html2canvas 1.4.1

Getting the same error, while attempting to convert a next js page styled with tailwind into a PDF.

[yorickshan]

I'm getting below error when I try to use html2canvas and daisyUI
Error: Attempting to parse an unsupported color function "oklch"
daisyUI 4.10.5 html2canvas 1.4.1

Did you manage to solve it? I'm having the same issue. I'm not even using html2canvas directly, just jspdf.html (which uses html2canvas)

Feel free to try using html2canvas-pro v1.5.5 or the most recent version.

[BSoDium]

Getting the same error with an MUI-Joy based website when trying to use jsPDF's html(...) method. The base CSS for the UI library seems to include some modern CSS function calls which aren't supported (the color function in my case).

Any workaround which would allow me to ignore these errors and still parse the rest? I wouldn't mind some specific colors being off as long as the function call doesn't crash.

[makueiathiengdit]

I'm getting below error when I try to use html2canvas and daisyUI

Error: Attempting to parse an unsupported color function "oklch"

daisyUI 4.10.5 html2canvas 1.4.1

i updated to html2canvas-pro and i was able to generate pdf without issue.
npm i html2canvas-pro

then import html2canvas from html2canvas-pro and that is all.

[Muyassr]

can you please clarify more on when to import html2canvas-pro.

btw, im using jsPdf library and i get this error

[BSoDium]

can you please clarify more on when to import html2canvas-pro.

btw, im using jsPdf library and i get this error

Same struggle here, I wrote an issue, since jsPDF uses html2canvas under the hood and there is no documented way of forcing it to switch to html2canvas-pro.
Link below:
parallax/jsPDF#3744

[ebharathi]

use https://www.npmjs.com/package/html2canvas-pro, it works!

This works perfectly

[yorickshan]

use https://www.npmjs.com/package/html2canvas-pro, it works!

This works perfectly

If you found this helpful, don't forget to leave a star 🌟.

[adenekan41]

I took a good look at this issue some days back and while @yorickshan fix mutes the error the screenshot comes out very broken on tailwind driven site and some other conditions. my application primarily needed to be so flexible you can take a screenshot on almost any site. so i needed a robust fix with the most stable html2canvas version.

now i don't advice installing another html2canvas package if html2canvas-pro works, but i merged a number of fix from myself, @yorickshan (object-fit) and @nidi3 (textarea issue).

and you can install it here to fix all your problems
https://www.npmjs.com/package/@codewonders/html2canvas

[yorickshan]

I took a good look at this issue some days back and while @yorickshan fix mutes the error the screenshot comes out very broken on tailwind driven site and some other conditions. my application primarily needed to be so flexible you can take a screenshot on almost any site. so i needed a robust fix with the most stable html2canvas version.

now i don't advice installing another html2canvas package if html2canvas-pro works, but i merged a number of fix from myself, @yorickshan (object-fit) and @nidi3 (textarea issue).

and you can install it here to fix all your problems https://www.npmjs.com/package/@codewonders/html2canvas

feel free to submit PR to https://github.com/yorickshan/html2canvas-pro.