Inconsistent image size between pdf and screenshots when viewport-relative sizes are used

[DanySK]

I'm trying to correctly render in pdf this slide:

(snapshot generated by decktape)

Its resulting code is:

<section class="present" style="top: 0px; display: block;">
<h2 id="hi-res-default">Hi res, default</h2>
<img src="4k.jpeg" style="
    
    
    max-width: 95vw;
    max-height: 80vh;
    object-fit: contain;
">
</section>

When rendering in pdf, however, the vw/vh units seem to be broken and relative to something different than the page size, and images get rendered much smaller than they should be.

Here is the generated slide pdf.

[astefanutti]

What presentation framework do you use? Could you try by increasing the viewport size with the --size option, e.g. --size='2048x1536' ?

[DanySK]

I'm using reveal.js. Yes I tried to change the viewport. It scales images, but font sizes as well, and text-wise the result is fine, what's in the browser gets reproduced on the pdf correctly. What I'd like is that what I see in the viewport in chrom(e/ium) is the same of what I see in a same-sized viewport when producing a pdf. Snapshots get generated correctly.

If it can be useful for reproducing the bug I can open the private repository where the issue appears (I currently worked it around by regex-matching my code and enlarging max-width and max-height when generating the pdf, but it's less than suboptimal.

[astefanutti]

That seems like #151. Unfortunately, this is due to rendering discrepancies between Chromium Web engine and the PDF export component.

[DanySK]

So I guess this is something upstream has to fix. Could you open a bug report to them? I'll :+1: it immediately.

[jonathan-g]

A bug report has been open since 2017: https://github.com/puppeteer/puppeteer/issues/915

[DanySK]

ARGH, it's open since sooo long... And they tagged it as "Chromium", so I wonder if it's something that should get opened directly on chromium: https://bugs.chromium.org/p/chromium/issues/list.

[jonathan-g]

I don't know enough about the internals of Chromium to know how to make a good bug report for this.

But the good news is that there's a workaround: Chrome and Chromium seem to do fine at rendering reveal.js slides to pdf from a terminal command prompt, with none of the problems I see with puppeteer and decktape.

Basically you want to serve your slides to localhost:8000 and then execute (you can play around with whether you want to disable the GPU and how large you want to set the maximum time budget for rendering):

chrome --headless --run-all-compositor-stages-before-draw --disable-gpu --virtual-time-budget=10000 --print-to-pdf=my_slides.pdf http://localhost:8000?print-pdf

And it's easy enough to wrap this command line in a script to make things less cumbersome.

[DanySK]

@jonathan-g man you really saved my day. I enabled a double generation of my slides in CI, both via decktape and via chromium headless. They seem to work nicely.

[jonathan-g]

So happy I could help.