Element size too big (only in Chrome)

I'm trying to render an HTML element on a canvas. To do this, I'm calculating the size of the HTML element beforehand by appending it to the document, getting the size, and then removing it later.

Problem is, in Chrome I get a size that's like 200 pixels too tall. So there's a giant whitespace under the element on the canvas.

I've tried not using any font settings at all, checked margin/padding (same problem even when removed) and tried to use scrollHeight/offsetHeight/clientHeight/jQuery...all give too-large height. I've read as many other posts as I can find and didn't get a solution. So...hoping someone can give me some new ideas :) In Firefox it works perfectly...

Here's the code:

function renderHTML(htmlContent, pageHeight, windowWidth, windowHeight, browserSettings, dPR) {
    var containerDiv = document.createElement("div");
    containerDiv.id = "container-div";
    var fontSize = emToPx(parseFloat(browserSettings.plaintext.fontSize)); // This is 14px in the console
    containerDiv.style.font = `${fontSize}px ${browserSettings.plaintext.fontFamily}`;
    containerDiv.style.backgroundColor = "#fc0303";
    containerDiv.innerHTML = htmlContent;

    // Create a new HTML document to pass into drawDocument
    var docToSign = document.implementation.createHTMLDocument();
    docToSign.body.innerHTML = containerDiv.outerHTML;
    docToSign.documentElement.style.backgroundColor = "#03fc07";

    // Get size of doc
    document.body.appendChild(containerDiv);
    var docWidth = containerDiv.scrollWidth;
    var docHeight = containerDiv.scrollHeight;
    // containerDiv.parentNode.removeChild(containerDiv);
    console.log("height: " + $("#container-div").height());
    console.log("containerDiv.scrollHeight: " + containerDiv.scrollHeight);
    console.log("containerDiv.offsetHeight: " + containerDiv.offsetHeight);
    console.log("containerDiv.clientHeight: " + containerDiv.clientHeight);
    console.log("docHeight: " + docHeight);

    var canvas = initializeCanvas(docHeight, windowWidth, windowHeight, browserSettings, dPR, docWidth);
    if (typeof canvas === "string") {
        console.log(`renderHTML: Error when initializing the canvas.`);
        return canvas;
    }
    console.log("canvas.width: " + canvas.width);
    console.log("canvas.height: " + canvas.height);
    ...

Output in console looks like:

In the canvas you can see a huuuge gap:

The red is the background for containerDiv and green is background for docToSign.documentElement. When I added a background to docToSign.document.body, it colored no more than documentElement. So, none of these elements is actually this tall. Where could the extra whitespace be coming from?