Unexpected wrap caused by lost floating point precision

[nextend]

Steps To Reproduce

https://codesandbox.io/p/sandbox/modern-screenshot-forked-zdw9p9?file=%2Findex.html%3A11%2C9

1. Open the given sandbox
2. A B C D should be in single line

Problem: The last character gets wrapped into new line on the screenshot.

The problem caused by that the window.getComputedStyle() floating precision limited to 4 decimals.

The div element with font family declaration is 74.140625px (getBoundingClientRect()) in the original rendering. In the SVG created by the library it gets 74.1406px and that small missing area cause the wrap.

Both window.getComputedStyle(temp1).width and window.getComputedStyle(temp1).inlineSize reports '74.1406px'

[Gamewise]

I've seen this issue as well.

[Gamewise]

@nextend do you know if there is a way to fix this?

[t-rexwave]

Getting this issue as well. Any ideas for a fix or workaround?

[nextend]

I do not think that there will be workaround. We switched over server side rendering with headless Chrome.

[nextend]

@qq15725 This problem still happens with complex example with the new version too.

https://codesandbox.io/p/sandbox/modern-screenshot-forked-4fdxk6?file=%2Findex.html%3A17%2C23&workspaceId=192a8b3e-2754-418a-b6f2-6bb0195a7dc0

[qq15725]

@qq15725 This problem still happens with complex example with the new version too.

https://codesandbox.io/p/sandbox/modern-screenshot-forked-4fdxk6?file=%2Findex.html%3A17%2C23&workspaceId=192a8b3e-2754-418a-b6f2-6bb0195a7dc0

The url no access permissions

[nextend]

I made it public.

[qq15725]

v4.5.1 looks normal

[nextend]

This is how it looks for me:

[dextrous-is-fun]

So excited for a fix for this if there is one!

[luruke]

I'm experiencing same issue on Android 10, chrome 130 :(

[luruke]

As temporary solution I ended up scaling down font size in copyCssStyles by 0.999