WKHTMLTOPDF - borders appear on pdfs

Question

I have a web page of data that I export to a pdf using wkhtmltopdf 0.12.3.2 (with patched qt).

When the data is displayed on screen, it looks exactly as I want it to appear as shown below:

When the data is rendered to the pdf, a "ghost" border appear on the pdf as shown below:

And when I print out the data, more 'ghost' borders appear on the page, as shown below:

How do I prevent these 'ghost' borders from appearing? I have tried many options but the solution eludes me.

I have tried outline: #fff solid medium !important; but this has no effect. I have also tried box-shadow: 0px 0px 1px #fff; but this has no effect.

This issue only seems to occur with the CSS border: double value.

Here is my html code:

<div class="resumeStyleStandardHeadings8" dir="ltr" style="direction: ltr;">Summary Details</div>

Here is my css code:

.resumeStyleStandardHeadings8 {
    background: #000;
    border-left: 10px double #fff;
    border-bottom: 10px double #fff;
    color: #fff;
    display: block;
    font-weight: 700;
    margin-bottom: 2px;
    outline: none;
    overflow: hidden;
    padding: 2px;
    padding-bottom: 5px;
    padding-top: 5px;
    page-break-inside: avoid;
    text-transform: uppercase;
    vertical-align: middle;
    white-space: nowrap;
    width: 100%
}

Jesicajeske

For troubleshooting try: removing box-shadow: 0px 0px 1px #fff; & ` dir="ltr" style="direction: ltr;"`. And please experiment with adding additional divs. You may need to nest contents one more level deep. Also, could you inspect-element (in html view; of course) and tell us what the box-sizing is? – Drooff

Also, does: --disable-smart-shrinking / --enable-smart-shrinking help? wkhtmltopdf.org/usage/wkhtmltopdf.txt – Drooff

admcfajn, thanks. I have tried all your suggestions, but the 'ghost' borders still appear. --disable-smart-shrinking / --enable-smart-shrinking does not appear to have any affect. – Jesicajeske

could you inspect-element (in html view; of course) and tell us what the box-sizing is? Changing border-box to content-box (&vice-versa) can make all the difference. – Drooff

box-sizing is border-box. I have changed this to content-box, but the issue persists. This is very frustrating. – Jesicajeske

Does this have to be single-element solution? can you wrap . resumeStyleStandardHeadings8 in another div? Or add one with . resumeStyleStandardHeadings8:before{}? – Drooff

Unfortunately, this must be a single element solution. – Jesicajeske

This issue only seems to occur with border: double value. – Jesicajeske

I've answered below. The white inner border on the left seems to extend a bit too far vertically, but the blur/shadow is gone. – Drooff

Answer 1

Using :before to fix problems with wkhtmltopdf double-border and background-color causing drop-shadow / blur. box-model, rendering, anti-aliasing, bug

<div class="resumeStyleStandardHeadings8" dir="ltr" style="direction: ltr;">Summary Details</div>


.resumeStyleStandardHeadings8:before{
  content: " ";
  position: absolute;
  z-index: -1;
  width:100%;
  height:36px;
  margin-left:-9px;
  margin-top:-5px;
  background:#000;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
}
.resumeStyleStandardHeadings8 {
    display: block;
    outline: none;
    overflow: hidden;
    page-break-inside: avoid;
    color: #fff;
    font-weight: 700;
    text-transform: uppercase;
    vertical-align: middle;
    white-space: nowrap;
    width: 100%;
    margin-bottom: 2px;
    padding: 5px 2px;
    background: #000;
    border-left: 2px solid #fff;
    border-bottom: 2px solid #fff;
}

Drooff