PDF export is broken : slides overlap

[Lucas-C]

C.f. http://lab.hakim.se/reveal-js/?print-pdf
Visible in Chrome 43 & Firefox 38.
Sorry to not give more details, but I think the result after the link jump is self-explanatory.
I have no idea what is causing this, maybe css/print/pdf.css is broken ?

[hadim]

Same issue here !

[achauve]

+1

[ebertmi]

Cannot reproduce this? In Chrome 43 the slides do not overlap in print preview? Do you really use print preview to see the final layout of the slides for printing? The pure HTML presentation of the print layout does not show the real output.

[saimn]

I have this issue when I use data-background with an empty slide (just to show a fullscreen image). Then the background image is shown under the next slide when printing.

[Lucas-C]

Ok so here is what it looks like under chrome 43 for me:

The screen above only appears during a second, and then I get the following (still broken) final screen :

[ebertmi]

But this is not the print preview! You need to adjust the page format and the borders for the final result.

[hakimel]

@waywaaard is correct. The overlapping content doesn't matter for the final PDF output – it will only look like that before you open the print dialog.

[saimn]

With

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

the background overlaps with the next slide content:

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

[hakimel]

@saimn That looks like a bug, though unrelated to this issue. Would you mind opening a new issue for it?

[Lucas-C]

My mistake about the original report, sorry.
And thanks for helping me !

[tomwestwood]

Afternoon all :)

I'll try and keep it as short as possible as this might be already answered above as it's very similar symptoms (more severe in my case; see below screen shot). I've tried the above and it hasn't provided the desired solution; print preview still displays overlapping elements. I'm using a dummy presentation as a concept to get the fix before I apply to ours.

How it should look:

How it does look when I apply the '?print-pdf' extension onto the presentation URL:

And in print preview:

I'm using Chrome (v43) and I'm pretty sure I'm using the latest reveal source files, so is there anything you guys can think of that might be causing the above? Any assistance would be greatly appreciated :)

Regards

Tom

[AbduKT]

+1

[Godrebh]

I had the same problem and could not solve it. Eventually I switched to decktape, which works like a charm.

[llaville]

Thanks @Godrebh . Interresting feedback about decktape !

[sk1ll10]

Same Problem here. +1
Chromium Version 49.0.2623.108 Built on Ubuntu 14.04, running on LinuxMint 17.2 (64-bit)

[hakimel]

From the look of of the screenshots in this thread, the css/print/pdf.css isn't loading. Can you try manually including it in your HTML file and printing again?

That stylesheet is normally loaded using a small script in the head of the default index.html file: https://github.com/hakimel/reveal.js/blob/master/index.html#L16-L22. However that may stop working if the pdf.css or index.html files are moved to a different relative path or the script is removed from the index.html file.

[sk1ll10]

Solved! Thx

edit: note for others -> if you include this your slides will always be in print mode! Comment out to be able to present again.

[ilanvandinski]

Hi,

It seems that I have a similar problem. I have added the pdf.css file and I've tried to print my presentation by adding the print-pdf parameter, and it's working for the slides with divs whose width is of 100%, but if I have several divs with other width it's not working.

An example with a width of 100%:

And another one with various width:

Did anyone have the same problem?

[katrinsharp]

+11 for decktape :)