Dom-to-image: Image size should crop for content clipped by overflow:hidden;

[john-m-adams]

Child element is larger than parent, but is not shown because parent has "overflow:hidden;" property.

Rendering parent element to image should produce an image the size of the parent, but is larger because of it's clipped children. The extra space is transparent for toPng(), and is black for toJpeg().

https://jsfiddle.net/yd6kkgqw/1/

Found in Chrome (Version 52.0.2743.82 m)
Verified in Firefox (Version 47.0.1)

[tsayen]

Seems like the jsfiddle is gone (404). First thing that comes to mind - can it be that the size of the "parent" is set by it's parent? So that when you clone just that "parent" node (this lib clones the node), it's size somehow becomes determined by the size of it's children. Anyway, would be nice to see that jsfiddle you've put together

[john-m-adams]

Sorry the link is fixed now.

From looking at the dom-to-image code, the SVG is created with the size of the node's scrollHeight and ScrollWidth properties. In the fiddle, a 100x100 node contains 110x110 of content, so it's scroll dimensions will be 110x110.

First thought was that the simple thing would be to check for overflow:hidden;, and if so, use a different height and width property... but that opens a huge can of worms. clientHeight and width doesn't appear to include border or scrollbars... which then opens another can of worms: what if the user is scrolled over/down, etc.

Perhaps clone the node into a div styled inline-block first. That div will contain the node, and borders, and scrollbars, and I checked: has a correct scrollHeight and scrollWidth for the clipped content.

[tsayen]

OK, I see the problem now. I'll try the check for overflow:hidden, we'll see what gets broken then :)

[karthickvkumar]

Hi @tsayen @john-m-adams have u find any solution for this?

[SkoricIT]

I solved it by wrapping the element and triggering the conversion on the outer one. Instead of using:
<div id="mapid"></div> and triggering on #mapid I use <div id="mapwrapper"><div id="mapid"></div></div> and trigger conversion on #mapwrapper. Take care not to have margins on the wrapped element or padding on the wrapper.

[ewkonzo]

@tsayen please don't fix this, i consider this bug a feature, i really struggled to implement this using html2canvas, Now that i found it some dude is reporting it as a bug!

[SkoricIT]

@ewkonzo How about making it an option, then?

[mcdemarco]

I'm also having this problem, but Ra1d3n's solution did not fix it for me. I was able to work around it by passing an explicit height and width (since I had them).

[arnaudambro]

@mcdemarco I used your solution, but we should be careful with fixed heights and widths because it is quite buggy with changes of resolution. Better to leave width and height automatic when possible.