html2canvas generates blank space for elements not selected to render

[davidrgh]

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:

I tried to render a div element that is in second place. I mean, I have one div tag with X height and a second div after this one with Y height:

The first div is the logo of angular and the second div is the map and the chart. I want to extract this one (map + chart) (it has the "captura1" id, that I use to recover the data:
var data = document.getElementById('captura1');

But the result is this one:

As you can see, the height of the canvas is correct, but there's a blank space and then my picture (obviously, the picture is cropped). If I remove the first div from my code, it works fine, so I guess that html2canvas is trying to print the elements I didn't select (it wastes the area with a blank printing).

How could I solve it?

Thank's

Specifications:

• html2canvas version tested with: v1.0.0-rc.3
• Browser & version: Firefox 67.0.4 and Chrome 75.0.3770.100
• Operating system: Windows 10

[muratgozel]

Same problem. Temporary solution:

elem.style.position = 'absolute'
elem.style.top = 0
html2canvas(elem, opts).then(function(canvas) {
  elem.style.position = 'relative'
  elem.style.top = 'unset'
  // save canvas as pdf
})

[mkubdev]

Same problem Angular 9-10-11 - html2canvas ^1.0.0-rc.7

@muratgozel You saved my week... It's working very well.