Html2canvas: Image getting cut off/extra white space

[RSNFreud]

Please make sure you are testing with the latest release of html2canvas.
Old versions are not supported and issues reported for them will be closed.

Please follow the general troubleshooting steps first:

• [x] You are using the latest version
• [x] You are testing using the non-minified version of html2canvas and checked any potential issues reported in the console

Bug reports:

The image is getting cut off at either the bottom or top depending on the scroll position.

html2canvas(document.querySelector(".canvas"), { width: 768, height: 370, windowWidth: document.querySelector(".canvas").scrollWidth, windowHeight: document.querySelector(".canvas").scrollHeight, scrollX: 0, scrollY: -window.scrollY, x: 0, scale: 3 }).then(canvas => { console.log(canvas); var base64image = canvas.toDataURL("image/jpeg"); saveAs(base64image, 'image.jpg'); });

Specifications:

• html2canvas version tested with: v1.0.0-rc.4
• Browser & version: Chrome Version 77
• Operating system: Windows 10

[charamza]

I am experiencing the same problem. I've traced the problem that it started to occur from version 1.0.0-rc.2, rc.1 is ok, if it helps.

[RSNFreud]

I am experiencing the same problem. I've traced the problem that it started to occur from version 1.0.0-rc.2, rc.1 is ok, if it helps.

Ye seems to work on 1.00-rc.2 so something changed since then...

[tradingstratagem]

I noticed the same thing

[ornic]

Ye seems to work on 1.00-rc.2 so something changed since then...

Nope, I tested all RCs 1-5 - the only one that not infected with the bug is RC1.

And all workarounds mentioned in https://github.com/niklasvh/html2canvas/issues/1878 wont help, unfortunately.

[tradingstratagem]

I also did the test, I can confirm it

[denisnd]

Also experiencing the issue. I have made some research and can tell that for relatively complex webpage constructed with JS components this thing happens every second test run with _random_ width of white stripe.
Moreover, when Network Speed throttling is turned on in DevTools (for instance Fast 3G preset is used), the issue can't be seen, which makes me think that it can be caused by some race condition bug inside the renderer.

Tested on Chrome 79 in Mac OS X 10.15.2

[tradingstratagem]

I fixed this problem by saving the scroll position (x and y), move the page to x=0 y=0, invoke the method and restore the position, it solved the problem