box-shadow is not rendered properly

[hakimio]

Box shadow rendering which should be supported in rc2 doesn't seem to work properly. Here are a couple of simple tests both of which fail:
http://jsfiddle.net/p5yvxqLw/

Edit:
Setting border-radius to the second box produces even weirder results:
http://jsfiddle.net/Lmfwbgy2/

[hakimio]

There seems to be some issue when the elements with box-shadow are not nested in other elements.

[hakimio]

@niklasvh
Here is an example which is a bit more relevant to me and not only shows issues with box-shadow rendering but also a regression since RC1 with border rendering:
http://jsfiddle.net/s8ro3ghm/

[hakimio]

And one more issue. Setting scale to > 1, causes shadow to be totally ignored:
http://jsfiddle.net/0wpo2nvz/

[hakimio]

@eKoopmans @niklasvh any thoughts on the issues shown here?

[bhagatapoorva]

Hi @hakimio , did you find a solution to the box-shadow issue? I'm facing a similar problem.

[hakimio]

@bhagatapoorva

• There is something broken with offset calculation in RC2 and RC3. Might be the regression mentioned in issue v1.0.0-rc.2 breaks PR #1083  #1919 . Haven't tested yet. Also, setting x and y options to 0 seems to help but doesn't fix the issue completely.
• Border-radius combined with box-shadow just doesn't work. Border-radius has to be removed.
• Workaround for missing border regression introduced in RC2 can be found in issue Inconsistent border when some of side border is 'none' #1920 .

In general, if box-shadow support is not a must have, I would recommend using RC1 which has a lot less issues.

[Thul999]

Has anyone found a solution to this issue?

[IgorKurkov]

Hi!
So I have tested RC1 and it works because there are no box-shadow at all in rendering.
In all another versions RC2+ and latest this issue still exist.
So my case looks on web like below (ordinary material card with box-shadow)

and html2canvas box-shadow issued:

I inserted a background:white'd <div> inside to make it a bit nicer by this idea https://stackoverflow.com/a/57201138/9026103
but it not helps as should :)

real issue looks without the div like:

any ideas?

[hakimio]

It only ever worked without border radius.
Anyway, there is a PR which supposed to fix this and there are some proposed workarounds here.
Test it out and let us know if the fixes work.

[IgorKurkov]

Sorry, don't have enough time to test it now. I Will try on the next weekend

[lumenwrites]

Hey guys! I really need to use javascript to take a "screenshot" of a div with a box shadow and border radius.

Do you know if there are any possible workarounds to this?

[fe-art]

Hey @IgorKurkov @hakimio

Thank you for working on html2canvas

Any news concerning this issue ? <3

[IgorKurkov]

No news, I have skipped it and make rendering by puppeteer now. Because no ideas to solve

[brucexu-eth]

@p-cote @lumenwrites just found passing an option { scale: 2 } to the html2canvas can solve the issue. Have a try. I found the solution is because when making the screenshot on my 4K monitor, it is working, but on 2K monitor, not working.

[nikth0]

here

doesn't work for me

[jadsy2107]

I've just stumbled across this issue, alas - i will find a solution ! Standby !

[jadsy2107]

I've just stumbled across this issue, alas - i will find a solution ! Standby !

Sorry guys html-to-cavas did it for us !!

[napstar-420]

This issue was opened on may 19, 2019. Today i had the same issue and after googling it i reached to this issue opened on github. And today is 24 december, 2022 approximately 3 years had passed but still no one has fixed it.

[chongchongLin]

now 2023/1/3 still no solution :(

[add-hi]

Still waiting for html2canvas...

But is there any suggested plugin for screenshots on React JS?

[saikatzahid2001]

Still not fixed! 😟 Any solution guys?

[summermong]

It still doesn't work in 2024 :/
PLZ tell me a different screenshot library...

[johnmartins]

I had the same issue. Switching to html-to-image package solved it for me