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

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.

[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]

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.