Reveal.js: Slide background overlap in the pdf export

[saimn]

Following #1252, if I use an empty slide with a background image (to show a fullscreen image), the background image overlaps with the next slide content in the pdf export:

<section data-background="https://s3.amazonaws.com/hakim-static/reveal-js/image-placeholder.png">
</section>
<section data-background="https://s3.amazonaws.com/hakim-static/reveal-js/image-placeholder.png" data-background-repeat="repeat" data-background-size="100px">
....

This can be avoided by adding some fake content in the empty section (<div>&nbsp;</div>), but it can be surprising when discovering reveal.js

[ddeboer]

I’m having a similar problem. As you can see, the (black) background color from the previous slide overflows slightly to the next (grey) slide. I’m using http://lab.hakim.se/reveal-js/?print-pdf#/.

Unlike @saimn, this also occurs for me with non-empty slides. I’m on Chrome 43.0.2357.130.

[obilodeau]

I was bitten by both of your PDF rendering bugs today. I looked at the code and tried to fix them but it seems that even though I triggered the @media print in the developer console I couldn't really emulate the print view and inspect how CSS affected the HTML tags and interactively debug it.

I could get a proper render with phantomjs and the print-pdf phantomjs plugin but links weren't working...

Long story short, I found about decktape which instruments phantomjs to crawl the slides and dump them into a PDF and it fixed all of my problems.

I'll open a PR to suggest trying it in the README under the print-pdf option.

[ddeboer]

Thanks @obilodeau, using decktape worked for me!

[opensource21]

decktape has a different focus. It creates a page for each fragment which is shown on a slide. More painful I wasn't able to create output in the format of DIN A4. So it would be nice if the issue could be fixed.

[jdwolin]

Having this same issue of overlapping slides on PDF export even with content. @obilodeau, can you explain more specifically how you got decktape to work in place of the default PDF export package?

[opensource21]

I start the presentation with Bracket and call
decktape bin\phantomjs decktape.js --size=842x595 http://127.0.0.1:51824/index.html mypresentation.pdf
Hope this makes it clear. Perhaps you can use file:// too, but I didn't make a test.

[scor]

confirmed using file:// works with decktape for local slides. had similar issues with the default export plugin where links were not exported as links in the PDF. decktape worked like a charm.

[DaveEveritt]

It _is_ an issue, but so easily fixed with the blank (nbsp) content, it's not a deal-breaker.

[obilodeau]

@DaveEveritt can you elaborate? I don't understand your workaround.

[DaveEveritt]

See the first post: "This can be avoided by adding some fake content in the empty section" i.e. this is (simplified) from my slides:
<section title="screenshot of the Guardian" data-background-image="images/guardian.png" data-background-size="900px"><div>&nbsp;</div></section>

in fact, the extra div is excessive:
<section title="screenshot of the Guardian" data-background-image="images/guardian.png" data-background-size="900px">&nbsp;</section>

The other gotcha is that the preview in the browser will still have bad overlaps (not just on the background-image pages), but when you hit 'Print' and save as PDF, pages that contain only a background image will appear correctly.

[jiayihu]

I was having the same issue and I can confirm that @DaveEveritt suggestion works perfectly. Maybe the print script should add the node within the sections in print-pdf mode.

[obilodeau]

The work-around does work @DaveEveritt. Thanks!

There is only one problem. I use some CSS to do text positioning on the title slide using margin-top specifying sizes in em and the "background drift" problem happens again. The CSS should only apply to h1, h2 elements and not the canvas so I don't understand what's going on.

Also, I'm not good enough in @media CSS to understand what I should do to fix this so that my positioning would work on both screen and print.

[DaveEveritt]

obilodeau - AFAIK there's a separate print stylesheet where you could - presumably - adjust your added styles.