Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Styling and positions from scrollbars are wrong in resulting screenshot #345

Open
2knu opened this issue Dec 5, 2022 · 2 comments · May be fixed by #408
Open

Styling and positions from scrollbars are wrong in resulting screenshot #345

2knu opened this issue Dec 5, 2022 · 2 comments · May be fixed by #408
Labels
bug

Comments

@2knu
Copy link

2knu commented Dec 5, 2022 •
edited
Loading

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

  1. 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
  2. Use toPNG function to get an png from node

Additional Context

Example:

  • How it really looks like
    scroll_real

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)
@2knu 2knu added the bug label Dec 5, 2022
@biiibooo
Copy link
Contributor

biiibooo bot commented Dec 5, 2022

👋 @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.

@2knu 2knu changed the title Styling from scrollbars is wrong in resulting screenshot Styling and positions from scrollbars are wrong in resulting screenshot Dec 5, 2022
@mthaak
Copy link

mthaak commented Feb 15, 2023

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

This was referenced Jun 8, 2023
Open
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix: workaround for respecting scrollbar positions 2knu/html-to-image
2 participants
@2knu @mthaak