box-shadow is not rendered properly

hakimio commented 5 years ago

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 commented 5 years ago

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

hakimio commented 5 years ago

@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 commented 5 years ago

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

hakimio commented 5 years ago

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

bhagatapoorva commented 5 years ago

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

hakimio commented 5 years ago

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

Thul999 commented 4 years ago

Has anyone found a solution to this issue?

IgorKurkov commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

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

lumenwrites commented 2 years ago

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 commented 2 years ago

Hey @IgorKurkov @hakimio

Thank you for working on html2canvas

Any news concerning this issue ? <3

IgorKurkov commented 2 years ago

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

brucexu-eth commented 2 years ago

@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 commented 2 years ago

here

doesn't work for me

jadsy2107 commented 1 year ago

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

jadsy2107 commented 1 year ago

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 commented 1 year ago

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.