Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Element shift (empty space on the right)

See original GitHub issue

I have a <div> element I want to turn into an image, in a Quasar/Vue site. The image renders fine; however, the <hr> separators are shifted out of the element.

Here is the view of the DOM element (from Chrome):

DOM_chrome

Expected Behavior

hr_bug

Current Behavior

JPEG: COVID_Duesseldorf_Übersicht_24 12 2020 (15)

SVG (as a screenshot): hr_bug_2

Possible Solution

This problem seems to occur with both JPEG and SVG, and is not limited to html-to-image: I have the same issue with dom-to-image. Also, the <hr> elements themselves are not the problem; without them, the situation (black/white space on the right) remains the same. They just show what happens a bit clearer.

Steps To Reproduce

Got to https://corona-duesseldorf.web.app/
Click on blue “Als Bild herunterladen” (“Download as image”) button
Compare

Your Environment

html-to-image: 1.3.20
OS: Windows
Browser: Chrome 87.0.4280.88 (64-bit), Firefox 81.0.2 (64-bit)

Issue Analytics

State:
Created 3 years ago
Comments:9 (6 by maintainers)

Top GitHub Comments

1reaction

issue-label-bot[bot]commented, Dec 26, 2020

Issue-Label Bot is automatically applying the label bug to this issue, with a confidence of 0.62. Please mark this comment with 👍 or 👎 to give our bot feedback!

Links: app homepage, dashboard and code for this bot.

0reactions

vivcat[bot]commented, Apr 10, 2022

This thread has been automatically locked because it has not had recent activity. Please open a new issue for related bugs and link to relevant comments in this thread.