Canvas not rendering fontawesome images in Safari.

[WriterStat]

Fontawesome images render great in Google Chrome, Firefox, etc...

But show up blank in Apple Safari.

ver. html2canvas 1.0.0-alpha.12

Here's my code:

$("#dl_stats").click(function() {
html2canvas(document.querySelector("#modal")).then(canvas => {
saveAs(canvas.toDataURL(), 'WSBookStats.png');
});

Thanks for any help,

[WriterStat]

It is possible this is related to issue #1610 although no white squares show up when using html2canvas to render fontawesome images for us. When I originally searched, item #1610 didn't show up in my issue search here. I just ran across it today in browsing. Feel free to close if this turns out to be the same issue.

[WriterStat]

Note: to replicate:

Load fontawesome files.
Add a fontawesome icon to html div on page.

Run:
$("#dl_stats").click(function() {
html2canvas(document.querySelector("#modal")).then(canvas => {
saveAs(canvas.toDataURL(), 'WSBookStats.png');
});

Save image.
Open image to look.

[mjsarfatti]

This pull request actually fixes it: #1649

[WriterStat]

Be advised #1649 pull request did not fix the problem.

Fontawesome icons still show up as blank in Apple Safari after applying the above pull request in our local code.

So fix still needed for this.

[jonmc1]

I'm having the same issue but with Glyphicons on Bootstrap v3. The icons are rendered on Firefox and Chrome but are completely missing on Safari and IE 11. https://jsfiddle.net/3vm2xb75/5/

html2canvas 1.0.0-rc.1
macOS 10.14

[kangbai]

leader When can it be repaired ?

[mihalikv]

Hi, do you have some solution for icons on safari please ? Also when I try it on test page here https://html2canvas.hertzen.com/tests/ with selected font-awesome and Safari icons don't show.

[tony5Dim]

I have tried and nothing of fontawesome renders. In https://html2canvas.hertzen.com/tests/reftests/text/fontawesome.html, that's the old version on fontawesome. It displayed the font in a then. Now it's in a and html2canvas render a blank space with all the browsers :(

[afreepenguin]

Any chance you guys have your font awesome css in a file named differently than it was distributed? Having same issue

[WriterStat]

My files are straight from the distribution. Both for 4.7 and for 5. I've also tried using the online approved hosted CDN fontawesome versions, they all seem to not render in Safari for all Apple devices. @Tonydim is correct, they don't seem to render on the html2canvas test pages for Safari either.

We think both fontawesome and html2canvas are great! So it's perplexing that it doesn't work for Apple devices running Safari. But does work on the other browsers.

Note: If you run either firefox or google chrome browsers instead on apple devices fontawesome renders great in both of those browsers on Apple devices. Fontawesome just doesn't render for some reason when running Safari on Apple devices.

Hope this helps someone find the fix soon. It's painful. =)))

[niklasvh]

is the issue resolved with #2018?

[WriterStat]

Hi @niklasvh

First off thanks very much for writing the great software and for the fixes. It's all amazing.

I'll give it a quick test and drop a note here. It may take a couple of days, I have my hands in another project I'm finishing. But will try and check by Monday here our time. Cheers, -C

[GuilhermeErmel]

is the issue resolved with #2018?

It worked for me! :D

[WriterStat]

Checking tonight, sorry about the delay, grinding on a project for BulletWrtr. Best, -C

[WriterStat]

I've sent it to the Apple Safari testers, just waiting for a note back how it went. Will post as soon as I see it. Thanks, -C

[WriterStat]

...is the issue resolved with #2018?

Hi @niklasvh, after testing, Font Awesome icons still showing as blank on Apple iPhone Safari versions. Haven't heard back from Mac Safari versions, but most likely same.

So issue still persists with displaying font awesome icons on Safari.

Dropdown boxes also are missing their text and down arrow on Safari.

Note: We are using Bootstrap versions 3.3.7 and also version 4 in case it helps.

Thanks very much for the help.

Let me know if I can provide images/details that could help.

[WriterStat]

We'll also try digging in a little further here. We'll try some advanced testing/changing code to see if it shakes loose.

[kartik1997EB]

Is this issue resolved ??

[tony5Dim]

I used these parameters and that worked:

allowTaint : true,
useCORS : true,
onclone: (element) => {
let svgElements = element.body.getElementsByTagName("svg");
Array.from(svgElements).forEach((svgElement) => {
let bBox = svgElement.getBBox();
svgElement.setAttribute("width", bBox.width);
svgElement.setAttribute("height", bBox.height);
});
}