Problem with foreignObjectRendering set to 'true'

[IAmRC1]

• html2canvas version tested with: latest
• Browser & version: Chrome latest
• Operating system: Ubuntu 16.04

So i have a admin page with a lot of charts, Now when i take screenshot with foreignobject set to false, which is default value, it gives me the icons n images but the most of the charts aren't visible, when i set it to true, the charts are visible but now the sidebar image and icons are rendered as square boxes. Also, there I have set overflow:hidden but the scrollbar is still visible. Attaching both screenshots with value true and false foreignObjectRendering: true foreignObjectRendering: false

ANY HELP APPRECIATED

[ChristianBeilschmidt]

Also, the font in the navigation is different. As far as I can see, you can't have both currently.

There are also some pull requests regarding these problems but there is not much progress currently.

[IAmRC1]

Well, i am moving forward with foreignobjectrendering set to false, and i am trying to fix the problem of rendering svg in html2canvas. Right now have a little success but its weird why one svg is rendering but the other one is not. Have a look Below is the screenshot

[ChristianBeilschmidt]

Maybe the left one is drawn inline and the right one is included as an outside object. There are three PRs open that might be connected - or might not: https://github.com/niklasvh/html2canvas/pull/2151 https://github.com/niklasvh/html2canvas/pull/998 https://github.com/niklasvh/html2canvas/pull/2020

[IAmRC1]

Well both are included as outside libraries, though different one, left is of react-apex-charts and right one is react-circular-progressbar. Though yesterday i found why the right one is not rendering, the reason being its not having a width and height attribute on svg, once I pass it in inspector, it does get rendered.

[ChristianBeilschmidt]

And what did you change to make the library render these svgs? (apart from setting the width and height)

[IAmRC1]

Setting foreignobjectrendering to true and setting width n height on svg will render it

[sinpor]

When I set foreignObjectRendering: true then background-image is not display. what should I configure

[woota]

Same problem...When I set foreignObjectRendering: true then background-image is not display. what should I configure

[arduR-O]

Same problem...When I set foreignObjectRendering: true then background-image is not display. what should I configure