iframe in Firefox showing white border around page slides

iframe now renders the pages of a pdf with a small white border. White border around page slides example

This only seems to be happening in Firefox, but not Chrome. On the deployed website, this problem does not appear on either browser. I tried checking out older commits, even older than the deployed website, where the problem didn't exist, but they are now exhibiting the same problem, so it seems to only be appearing locally.

Differences I noticed inspecting the element on the local and on the deployed website:

Local:

<div class="page" style="width: 832px; height: 468px;" data-page-number="1" data-loaded="true">
    <div style="width: 832px; height: 468px;" class="canvasWrapper">
        <canvas id="page1" moz-opaque="" width="944" height="536" style="width: 833px; height: 469px;">
        </canvas>
    </div>
    <div class="textLayer" style="width: 832px; height: 468px;">
        <span style="left: 48.4432px; top: 230.263px; font-size: 57.2208px; font-family: sans-serif; transform: scaleX(1.01518);">TEXT</span>
        <span style="left: 48.4432px; top: 317.307px; font-size: 17.368px; font-family: sans-serif; transform: scaleX(0.992477);">TEXT</span>
        <span style="left: 205.504px; top: 317.307px; font-size: 17.368px; font-family: sans-serif; transform: scaleX(1.0008);">TEXT</span>
        <div class="endOfContent"></div>
    </div>
</div>

Deployed:

<div class="page" style="width: 832px; height: 468px;" data-page-number="1" data-loaded="true">
    <div style="width: 832px; height: 468px;" class="canvasWrapper">
        <canvas id="page1" moz-opaque="" width="1040" height="585" style="width: 832px; height: 468px;">
        </canvas>
    </div>
    <div class="textLayer" style="width: 832px; height: 468px;">
        <span style="left: 48.4432px; top: 230.263px; font-size: 57.2208px; font-family: sans-serif; transform: scaleX(1.01504);">TEXT</span>
        <span style="left: 48.4432px; top: 317.307px; font-size: 17.368px; font-family: sans-serif; transform: scaleX(0.993587);">TEXT</span>
        <span style="left: 205.504px; top: 317.307px; font-size: 17.368px; font-family: sans-serif; transform: scaleX(1.00146);">TEXT</span>
        <div class="endOfContent"></div>
    </div>
</div>

• page1 canvas has different width and height, both in-element and in style
• text span scale is a bit different

I haven't changed anything that might be influencing this and it is broken in older local commits where it used to work. What could be the reason behind this and how can I fix it?

Edit: The problem is different from White space is still present around the iframe border even after after setting frameborder to 0 as it definitely doesn't stem from the embedded document. Additionally, I noticed that the white space remains even when in full screen, when the slide does not fill the screev.