dom-to-image is not working in safari when trying to convert more than one image to JPEG

Question

I want to create a website where the user can customize t-shirts. The user can upload a picture which is then added to a canvas (user can resize and move the picture on the canvas, this is done with fabric canvas).

Link to the Website

Before uploading the images to a server, so we can show them in the cart, we convert the div with the image and the canvas to a JPEG, this is done with dom-to-image. This works great on the usual browsers like Firefox, Chrome, Edge but not on Safari.

I created some sample code (minimal code example) to show you what we have done:

<div class="tabby-tab">
    <input type="radio" id="0" class="tab_ch" name="tabby-tabs">
    <label for="0">Front</label>
    <div class="tabby-content">
        <div class="full_img_view mx-auto" id="tshirt_div_0">
            <img src="src_of_front_image" class="front_img">
            <div class="drawing-area-front">                    
                <canvas id="tshirt_canvas"></canvas>
            </div>
        </div>
    </div>
</div>

<div class="tabby-tab">
    <input type="radio" id="1" class="tab_ch" name="tabby-tabs">
    <label for="1">Back</label>
    <div class="tabby-content">
        <div class="full_img_view mx-auto" id="tshirt_div_1">
            <img src="src_of_back_image" class="back_img">
            <div class="drawing-area-back">                 
                <canvas id="tshirt_canvas"></canvas>
            </div>
        </div>
    </div>
</div>

<br>

<button id="add_to_cart">Add to cart</button>

<script>

    jQuery(document).on('click', '#add_to_cart', function() {

        var total_canva = jQuery('.full_img_view');

        jQuery.each(total_canva, function(index, item) {

            // deselect object from fabric canvas
            var gradCanvas = canvasList[index];
            gradCanvas.discardActiveObject();
            gradCanvas.requestRenderAll();

            document.getElementById('canv_img_'+index).innerHTML = "";
            var options = {quality: 0.95, allowTaint: true, useCORS: true};
                
            setTimeout(function() {
                domtoimage.toJpeg(item, options).then(function(dataUrl) {
                    domtoimage.toJpeg(item, options).then(function(dataUrl2) {
                        var img = new Image();
                        img.src = dataUrl2;
                        img.style="display: none";
                        console.log(img);
                    });
                });
            },50);

        });

    });

</script>

I just added the front and back side, to keep it simple. You may ask why I used the domtoimage.toJpeg() function twice, this is a little hack to get it working on safari and if I only try to convert the front side (with a picture in the canvas) to JPEG in works fine, but when I try to convert first the front side and then the back side (both a with a picture in the canvas) I get two just white images, and I can't find out why. I also can convert just the backside to a JPEG but never both.

Further information:

• I tried using html2Canvas which just convert the background image of the t-shirt to JPEG but not the image in the canvas.
• This code is used in a WordPress plugin, so we work in the WordPress environment.

Maybe some of you have had this problem and know the solution. If you need more information, just ask.