tailwind's backdrop-blur-md utility class dissapeard on toPng, toJpeg rendering option

[Jervx]

tailwind's backdrop-blur-md utility class dissapeard on toPng and toSvg rendering option it correctly works

Expected Behavior / My Target

I wanted to render this card on It should look like this which contains the backdrop blur

Current Behavior

After exporting, It doesn't include the blur.

Steps To Reproduce

1. use toPng or toJpeg rendering option

Additional Context

I tried toSvg which works correctly, But I really need to render it as png which include the transparency. toJpeg doesn't include the backdrop blur either

My Environment

• html-to-image: [1.11.11]
• OS: [Ubuntu 23.04]
• Browser: [Version 120.0.6099.129 (Official Build) (64-bit)]

[vivcat[bot]]

👋 @Jervx

Thanks for opening your first issue here! If you're reporting a 🐞 bug, please make sure you include steps to reproduce it. To help make it easier for us to investigate your issue, please follow the contributing guidelines.

We get a lot of issues on this repo, so please be patient and we will get back to you as soon as we can.

[Jervx]

I found a work around for this, Instead of having the topmost div to do the blur, I created a div that has the background and then applied a blur filter on the div blur-md instead of backdrop-blur-md & it works after exporting.

// Before
<div className="bg-image"> // ref container & handles bg image
    <div className="backdrop-blur-md bg-orange-400/10"> // handles bg blur & bg color & opacity to see the blur
    .....
    </div>
</div>

// Workaround
<div className="relative"> // ref container set to relative
    <div className="h-full w-full absolute top-0 left-0 bg-image blur-md"/> // handles blur & image
    <div className="bg-orange-400/10"> // only handles bg color
    .....
    </div>
</div>