search

mixu / electroshot

Capture website screenshots with optional device and network emulation as jpg, png or pdf (with web fonts!) using Electron / Chrome.
548 stars 34 forks source link

pdf screenshot not working properly with CSS boxshadow #9

Closed salomonelli closed 7 years ago

salomonelli commented 7 years ago

Hi

I got this box:

should

<div class="box"></div>
<style>
.box {
    width: 100px;
    height: 100px;
    box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12), 0 3px 1px -2px rgba(0,0,0,.2);
    background: white;
    margin-left: 10px;
    margin-top: 10px;
}
</style>

Screenshotting with png works. But when I generate a pdf with this command: electroshot localhost:3000/test 2481x3508 --format pdf --filename "test.pdf"

this is the result: is

As you can see the boxshadow is not correct. Am I doing something wrong?

mixu commented 7 years ago

Hmm I haven't played around with the PDF generation in depth but my guess is its trying to print without borders and margins - just like Chrome does by default. I bet there's some option in the electron api for this - lmk if you can find it and I'm happy to add it in a PR!

salomonelli commented 7 years ago

Thanks for the hint! I discovered that box shadows can't be printed in Chrome. The options are to either not print shadows or to add this styling to the element:

.box{
-webkit-print-color-adjust:exact; 
-webkit-filter:opacity(1);
}

With this shadows are being printed. Unfortunately the quality gets extremly low. See http://stackoverflow.com/questions/13975198/text-shadow-and-box-shadow-while-printing-chrome