foreignObjectRendering issues

[eKoopmans]

Hi @niklasvh, thanks again for all the great work on html2canvas. I know I was keen for you to reintroduce foreignObject rendering, and it's looking good for the most part, but I'm having some issues with it:

• ligature fonts (?) - one of my testing pages uses Google Material Icons, a font which turns short phrases into icons, and it's not working... not sure why. Just displays as the original text.
• opacity - this was maybe exploiting a bug, but for html2pdf I was creating a div with 0 opacity and then capturing that. html2canvas captured it properly without it displaying on-screen. That doesn't work with the foreignObject renderer unfortunately.
• speed - surprisingly, it's a lot slower (on my machine at least) than the other approach!

So, I'll keep trying to track down those issues!

[niklasvh]

I am thinking of setting it by default to not use it, because at the moment it is only Chrome that supports it and there are a number of issues regarding it, in addition to what you mentioned:

• Unable to init scroll position for elements
• Doctype offset in rendered img #1298

[eKoopmans]

I think that might be best, for now at least. Are you sure it's only supported in Chrome though? This article suggests all but IE...

[niklasvh]

Firefox stopped working recently with images, Safari doesn't work, Edge doesn't work with background images. Currently, html2canvas attemps to use ForeignObject rendering always by default, and before it does it tests the support by running https://github.com/niklasvh/html2canvas/blob/master/src/Feature.js#L83. If the browser doesn't fail those tests, it will use the Foreign object renderer.

[eKoopmans]

Interesting, looks like a good test. Well I agree with making foreignObject non-default - keeps the results consistent across devices.

[Mihail-Lyulev]

Another issue with foreignObjectRendering is that onclone callback doesn't get executed

[lonelydatum]

@Mihail-Lyulev Yeah, I noticed when I use foreignObjectRendering

1. that the onclone doesn't trigger
2. scale: bigger than 1 is rendered offset