jsPDF html method – autoPaging option with the ‘text’ mode causes issues with text styling

Good day, I wanted to ask a question related to using the html method of jsPDF to generate a PDF based on the html contents of a page. I am using Vue 3 for my frontend and Laravel 10 for my backend. The issue lies specifically with using the autoPaging option. It works well for text alone, however, if the text has any styling attached to it, such as a background color or borders, when the page breaks, the text gets correctly pushed downward onto the next page, but the background color and border get cut off and the styling gets misaligned. I am attaching my code to show a simple generation of this error with a repeated h1 element that crosses the boundary from one page to another.

*Also to add some more context, html2canvas-pro was used instead of html2canvas, because an oklch error was occurring with some of the color functions in the codebase when using the original version of html2canvas, and this error was resolved when using the updated one. It was also necessary since jsPDF uses html2canvas under the hood. Lastly, the px-scaling was a hotfix that was added to jsPDF’s list of hotfixes, and it creates more accurate pixel scaling when rendering, so that is why that option was chosen.

Code:

<script setup>

import { Head } from '@inertiajs/vue3';
import { jsPDF } from "jspdf";
import { onMounted, ref } from 'vue';
import html2canvas from "html2canvas-pro"; 

window.html2canvas = html2canvas;

function capture(){
    const doc = new jsPDF({
        orientation: 'p',
        unit: 'px',
        format: 'a4',
        hotfixes: ['px_scaling'],
        });


    doc.html(document.getElementById('pdf-container'), {
        callback: function (doc) {
            doc.save();
    },
        margin: [60, 20, 60, 20],
        autoPaging: 'text',
        width: 754,
        windowWidth: 900,
    });

}


</script>

<template>
    
<div id="pdf-container" class="pdf-container">

    <h1 v-for="x in 50">This is a test h1 element.</h1>
    
<button class="btn mt-8 btn-neutral" @click="capture()">Download PDF</button>

</div> <!--end of pdf container-->


</template>

<style scoped>

.pdf-container{
    @apply w-full p-12 pt-4 bg-white;
    font-family:'Arial', sans-serif;
    letter-spacing: 0.01px;
    
}


h1{
    @apply font-bold text-2xl border border-black;
}


</style>

This image below shows what is generated when that Download PDF button is clicked.

Styling for the border at the edge of the page gets misaligned while the text is preserved.

Another example where instead of border, a background color is applied, but it similarly loses its style formatting.