Isue with DaisyUI plugin

[dovaldev]

Bug reports:

I have been using html2canvas for a while and everything was working fine, until I tried DaisyUI and then I started having a rendering issue with the color. If you use that library, you will encounter problems when generating the canvas:

Attempting to parse an unsupported color function oklch ...

Specifications:

• html2canvas version tested with: 1.4.1
• Browser & version: Las version Chrome
• Operating system: Android and MacOS

[thelfensdrfer]

The unsupported color function is oklch. Don't know why you decided to leave out the most important part 😉

[aksar9211]

Facing the same issue.

Have you got any workarounds?

[dovaldev]

The unsupported color function is oklch. Don't know why you decided to leave out the most important part 😉

Updated. Thanks! :)

[dovaldev]

Facing the same issue.

Have you got any workarounds?

I uninstalled DaisiUI and installed another alternative Tailwind library.

[thelfensdrfer]

Have you got any workarounds?

The best solution I could come up with was using a simplified stylesheet without daisyui. So same as @dovaldev.

[aksar9211]

I've downgraded the DaisyUI version from 4x to 3.9.4. Now everything is working fine.

[iyansr]

I've downgraded the DaisyUI version from 4x to 3.9.4. Now everything is working fine.

Thanks, working for me

[brerdem]

When I installed 3.9.4 instead of 4.x, it worked for me too but it would be great if the maintainers add support for new color specs. Downgrading isn't an ideal solution

[yosefebrahimi7]

hi please help me toooo!

**Uncaught (in promise) Error: Attempting to parse an unsupported color function "oklch"**

[semiautomatix]

Really? DaisyUI is basically my only option?

[sksizer]

I have got a branch that has a patch applied in source code that deals and converts the oklch values, that is working but I haven't done any of the work to add unit testing and the like.

[yorickshan]

The unsupported color function is oklch. Don't know why you decided to leave out the most important part 😉

use https://www.npmjs.com/package/html2canvas-pro, it supports color function oklch!

[sksizer]

The unsupported color function is oklch. Don't know why you decided to leave out the most important part 😉

use https://www.npmjs.com/package/html2canvas-pro, it supports color function oklch!

Awesome!

[NgallaJuke]

Instead of install html2canvas, install htmlcanvas-pro
It support the oklch just like @yorickshan said
But I'm facing another issue.
I have a simple div with a paragraph in it.
when the pdf is generated, the paragraph is pushed down outside the div

<div class="bg-blue-50">
        <p class="text-xs">
          Placeholder for PDF Page BODY
        </p>
</div>

How it looks on the page

how it looks on the pdf

[yorickshan]

Instead of install html2canvas, install htmlcanvas-pro It support the oklch just like @yorickshan said But I'm facing another issue. I have a simple div with a paragraph in it. when the pdf is generated, the paragraph is pushed down outside the div

<div class="bg-blue-50">
        <p class="text-xs">
          Placeholder for PDF Page BODY
        </p>
</div>

How it looks on the page

how it looks on the pdf

I didn't reproduce the issue using the latest version (1.5.6). Please feel free to submit a detailed issue to html2canvas-pro, preferably with a minimal demo.