Chrome print taking too long for page

I have been developing a print/PDF-friendly template for articles on a WordPress website for which I modified the Tufte CSS template.

For some reason, the print preview render (and subsequent print/saving to PDF) is taking forever on Chrome and browsers with Chromium cores such as Edge. The issue does not persist on Firefox and Safari. You can try for yourself on the link here between Chrome/Edge/(Chromium based browser), Safari and Firefox.

I thought it could probably be because of large text increasing the number of pages, or the JavaScript functions, but testing either has not brought any change to Chrome's behaviour. Loading the page on Chrome's "Emulate CSS print mode" does not show any delay in loading either until it goes to print.

There is no way for me to figure out what is Chrome doing while it's rendering the article for print, and it's driving me nuts.

There are a couple JavaScript functions that run on page load to make the content print-friendly for the A4 format. These are mainly to do with handling the interactive iFrames embedded in the post, making them print-friendly.

Check if any of the iFrames has been substituted with a static image for print, if so, replace it with the static image. Else tag and resize each iFrame to fit into print bounds:

var iframe_exists = false;
        if ($('iframe').length > 0) {
            iframe_exists = true;
        }
        $("iframe").each(function(index){
            if(typeof $("p.print-sub-img")[index] !== 'undefined'){
                $(this).replaceWith($("p.print-sub-img")[index]);
            }
            else {
                newDiv = $('<div>').append($(this).clone());
                let adjusted_dims = null;
                adjusted_dims = adjustFrame($(this).width(), $(this).height());
                newDiv = $('<div>').append($(this).clone().removeAttr('style').attr({'style': 'width: '+adjusted_dims[0]+'px; height: '+adjusted_dims[1]+'px;'})).attr({'class': 'print-frame', 'align': 'center', 'id': 'iframe-'+index});
                $(this).unwrap().replaceWith(newDiv);
            }
        });

Check if the static image substitution above has been completed:

// script from https://www.seancdavis.com/posts/wait-until-all-images-loaded/ - thanks sean!

        // Images loaded is zero because we're going to process a new set of images.
        var imagesLoaded = 0;
        // Total images is still the total number of <img> elements on the page.
        var totalImages = $("img").length;

        // Step through each image in the DOM, clone it, attach an onload event
        // listener, then set its source to the source of the original image. When
        // that new image has loaded, fire the imageLoaded() callback.
        $("img").each(function (idx, img) {
            console.log('img load check', img)
            $("<img>").on("load", imageLoaded).attr("src", $(img).attr("src"));
        });

        // Do exactly as we had before -- increment the loaded count and if all are
        // loaded, call the allImagesLoaded() function.
        function imageLoaded() {
            imagesLoaded++;
            if (imagesLoaded == totalImages) {
            allImagesLoaded();
            }
        }

Create a QR code to link to the web version of the article, and trigger the print command:

function allImagesLoaded() {
            console.log('generating qr....')
            if (iframe_exists == true){
                    var qrcode = new QRCode($("#qr-code")[0], {
                    text: "<?php echo get_site_url().'/'.$post_slug ?>",
                    width: 128,
                    height: 128,
                    correctLevel : QRCode.CorrectLevel.H
                });

                $('#qr-banner').show();
            }

        
        window.print();
        console.log("print triggered")
    }
    });

from Chrome print taking too long for page