Styling and positions from scrollbars are wrong in resulting screenshot

2knu commented 1 year ago

When you add a custom styling for scrollbars like the color, width etc. it will be wrong in resulting screenshot. Example to define styled scrollbars: https://codepen.io/team/css-tricks/pen/QWWXQzE

Expected Behavior

Size, Color, etc. is exact the same in resulting screenshot

Current Behavior

Default style from scrollbars is visible instead of custom styled. The scroll position seems to be wrong too sometimes

Possible Solution

Check if webscroll styling exists and apply to cloned nodes were scrollbars are visible
set scrollTop and scrollLeft to use the corret scrollposition

Steps To Reproduce

Define some node or page with styled scrollbars like here https://codepen.io/team/css-tricks/pen/QWWXQzE or https://www.w3schools.com/howto/howto_css_custom_scrollbar.asp
Use toPNG function to get an png from node

Additional Context

Example:

How it really looks like

Generated with html-to-image scroll_generated

(The whitespace is just because we use shadow dom for performance reasons)

Your Environment

html-to-image: 1.11.1
OS: Windows 11
Browser: Microsoft Edge Version 107.0.1418.62 (Offizielles Build) (64-Bit) (same with newest chrome version)

vivcat[bot] commented 1 year ago

👋 @2knu

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.

mthaak commented 1 year ago

This happens in Chrome and Edge for me, but not in Firefox

Also, I worked around this by temporarily setting the overflow: hidden style property for all elements before calling toPng

bubkoo / html-to-image