when i try to create an image of a div, my css structure is lost

[luizottavioc]

The structure of my div seems like this for the user:

But, when i try to create the image of them, i get this:

All of this, apparently, only happens on the chrome browser and i dont know how. I thought this could have been caused by my css structure because i was using a grid-layout, but even using a flex-box div, the layout error kept appearing. i dont get no one console error or something similar. someone can help me to fix this? i dont have any ideia what i can do about that

My javascript code:

domtoimage.toJpeg(document.getElementById('rotograma-render'), { quality: 0.75 }) .then(function (dataUrl) { $('#image-to-print').attr('src', dataUrl); });
}) .catch(function (error) { console.error('oops, something went wrong!', error); });

Browsers

• Chrome version: 101.0.4951.67
• Firefox version: 100.0.2