Html2canvas: Issue with IE and rendering inline vertical scroll bar

[Mani2693]

• [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

Issue :

We have a grid with contains multiple charts ( highchart ) and table ( Datatable )

We are trying to export the grid as png, So below is the expected end result

The above exported image is done with https://github.com/tsayen/dom-to-image ( but this library don't have support for IE which is need for my project )

Using our library we are trying to export the same in both IE and chrome browsers. But facing few below issues

1. In IE it doesn't export highcharts and fa-fa-icons, Also all the objects where placed at incorrect position
   Result in IE as below :
   

2. In Chrome when the window is having inner scroll bar then it ignores the scroll bar and displaying all the content inside the division

   • Scroll bar appears because of the CSS ( overflow : auto ) which means the library is not working with this CSS
     

Above image the table chart overlaps all the content ( Please compare it with expected image )

Same can be reproduced in fiddle with normal text: http://jsfiddle.net/manigandan2693/hv5yfe3c/1/

1. Both Chrome and IE takes screen shot of only the page which is in current window view ( Example : It ignores the page which we have to view by scrolling the page ) -> Please compare it with expected png image above

Code used to create png :

It would be helpful if the issue gets fixed ASAP since we are nearing to our project release

Please revert back for any clarification

Bug reports:

http://jsfiddle.net/manigandan2693/hv5yfe3c/1/

Specifications:

• html2canvas version tested with: 1.0.0 alpha 4
• Browser & version: Chrome 55.0.2883.87 m and IE 9+
• Operating system: Windows 7 and windows 10

[niklasvh]

Thanks for the well written bug report and example! Will get this fixed soon

[Mani2693]

Thanks for accepting as bug , I hope we will get fix soon ( Since we are nearing to our project release )

It would be helpful if you can give some ETA for fix :)

Thanks
Mani

[niklasvh]

Should be partially fixed with https://github.com/niklasvh/html2canvas/commit/38749bc4b6a861f778a915491fc7d84fea6e1a2f

[Mani2693]

Thanks for working on it , With the above fix I can see below improvements in chrome and IE

Expected result :

1. Chrome browser - Content appears over the scrollbar is fixed in Chrome as you can see in the actual result after 1.0.0-alpha.5 fix
   

2. In IE it remains - It was not able to render highcarts SVG as you see empty panels , And scale which renders appears to be much wider than actual
   

3. It skips to take image of contents below the current screen ( content which we need to scroll down and view from current screen window ) in both IE and chrome

Hope the above information will help you to narrow down more

[Mani2693]

Hi ,

Is there any update regarding the Fix ? , It would be so helpful if you fix it ASAP

Thanks
Mani
Applied Materials

[FDIM]

@Mani2693 keep in mind that if your charts are rendered to svg, they wont work out of the box (at least in IE). We are using canvg library to convert these cases to canvas. We also needed a workaround for tag.

[Mani2693]

Thanks for the response, I will look into canvg library

I also need help with position of elements in resultant image , If we compare with Excepted result all the elements in the actual result are zoomed and misplaced with wider space between them, Many of the element going wider in position than its original position

And also It stopped capturing elements which are placed below current window ( one which we can view by scrolling down )

Please need help as soon as possible , we are running out of time here , sorry

Thanks again

Regards,
Mani
Applied Materials

[Mani2693]

Hi Team,

Sorry we need to fix ASAP since this is very important fix, I request any fix/workaround for this issue

Please consider fixing it

Thanks
Mani