Dom-to-image conversion results misaligned content in Image for CSS flex styles
premananth-banusekaran-ctct opened this issue · comments
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+