html2canvas box-shadow is not rendered properly

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/

May 29 '19 07:05 hakimio

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

May 29 '19 07:05 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/

May 29 '19 09:05 hakimio

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

May 29 '19 13:05 hakimio

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

Jun 03 '19 06:06 hakimio

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

Jul 11 '19 11:07 bhagatapoorva

@bhagatapoorva

There is something broken with offset calculation in RC2 and RC3. Might be the regression mentioned in issue #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 #1920 .

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

Jul 13 '19 21:07 hakimio

Has anyone found a solution to this issue?

May 25 '20 03:05 Thul999

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?

Jun 03 '21 00:06 IgorKurkov

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.

Jun 03 '21 06:06 hakimio

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

Jun 07 '21 13:06 IgorKurkov

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?

Dec 07 '21 16:12 lumenwrites

Hey @IgorKurkov @hakimio

Thank you for working on html2canvas

Any news concerning this issue ? <3

Feb 01 '22 12:02 fe-art

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

Feb 01 '22 13:02 IgorKurkov

@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.

Jul 15 '22 09:07 brucexu-eth

here

doesn't work for me

Jul 22 '22 08:07 nikth0

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

Nov 25 '22 09:11 jadsy2107

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

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

Nov 26 '22 03:11 jadsy2107

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.