When I use export as PNG, some element styles will be disordered

[cMing1997]

Expected Behavior

The exported image style should be the same as the one displayed in the browser

Current Behavior

The text that was supposed to be on one line appears as a newline display

Possible Solution

Steps To Reproduce

My code:

const { chartDom, igEleClass = [], fileName, backgroundColor = "#fff" } = params;
const pngData = await toPng(chartDom, {
        backgroundColor,
        pixelRatio: 3,
        filter(element) {
            if (!(element instanceof HTMLElement))  return true            
            const eleClass = [];
            element.classList.forEach(t => eleClass.push(t));            
            return igEleClass.filter(t => !eleClass.includes(t)).length == igEleClass.length;
        },
})

Page display:

Export result:

Additional Context

Your Environment

• html-to-image: [e.g. 1.11.11]
• OS: [window 10]
• Browser: [5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/111.0.0.0 Safari/537.36]

[vivcat[bot]]

👋 @cMing1997

Thanks for opening your first issue here! If you're reporting a 🐞 bug, please make sure you include steps to reproduce it. To help make it easier for us to investigate your issue, please follow the contributing guidelines.

We get a lot of issues on this repo, so please be patient and we will get back to you as soon as we can.

[cMing1997]

When I use a fixed width and height for an element, there is no text wrapping, but if I use padding to set adaptivity, there will definitely be text wrapping

[cMing1997]

When I export text that will wrap, I add a  Spaces, text will not wrap when exporting

[invaderb]

I have experienced a similar issue mainly with chrome, firefox and safari doesn't appear to have the same issue with what I'm dealing with.

I've noticed it might be based on the screen resolution chrome appears to shift some elements around with no reason. Ie on my ultra wide 4k monitor it saves the images with the dis-orderd elements but on my laptop monitor it exports fine.

I tried playing around with pixelRatio and canvas size to no avail on weird monitor sizes

[rframil]

When I export text that will wrap, I add a Spaces, text will not wrap when exporting

Could you elaborate on that?

My text keeps being formatted differently in the image, even if the container has a fixed width and height.

Edit: After playing around with many css attributes to figure out what was wrong, I found that non-int font sizes will cause text linebreaks to be unreliable. For instance, font-size: 17.5px will sometimes lead to a canvas that is different from what the browser's showing, but font-size: 18px won't.

[cMing1997]

When I export text that will wrap, I add a Spaces, text will not wrap when exporting

Could you elaborate on that?

My text keeps being formatted differently in the image, even if the container has a fixed width and height.

Edit: After playing around with many css attributes to figure out what was wrong, I found that non-int font sizes will cause text linebreaks to be unreliable. For instance, will sometimes lead to a canvas that is different from what the browser's showing, but won't.font-size: 17.5px``font-size: 18px

The font size setting for newlines is the browser's default size, which is 12px. To be more specific, my solution at the time was to add text after rendering  

Nothing else has been changed in particular