Dom-to-image conversion results misaligned content in Image for CSS flex styles

[premananth-banusekaran-ctct]

Use case:

The DOM content was misaligned for CSS Flex properties when converting from dom-to-image using the Blob method (We also tried the PNG conversion method and were able to reproduce this issue). This is specifically happening to the Laptop screen for the below scenario
Scenario 1:

• Windows Display Settings: Scale - 125% recommended settings
• Browser set to default view (Zoom 100%)

Scenario 2:

• Changing Windows Display Settings: Scale - 100% recommended settings
• When the browser Zoom level is set to 125% and above.

Live Code Link: StackBlitz
Source File: Dom-to-image-Alignment Issue.zip

Expected behavior

The image should render the layout the same as in the browser view.
Expected and Actual Browser View:

Actual behavior

Actual Output from dom-to-image-more lib:

Library version

Dom-to-image-more: 3.1.6

Browsers

• Chrome 120+