[Safari 10.1.2] Can't render FontAwesome Icon in canvas.

[stevencherry1]

Bug reports:

I am using this library to convert FontAwesome Icons on the html page into canvas, then converting them to base64 string, and finally, to byte[] for use in a crystal report. On Firefox and Chrome, this functionality works perfectly. On Safari 10.1.2, the canvas element doesn't render the icon; It shows as a blank, white square.

To Reproduce:

1. Add a fontawesome 4 icon on to html page.
2. Call
   html2canvas(document.querySelector(#icon), { logging: true, allowTaint: true })
3. When promise fulfills, call:

    canvas.toDataURL();
    document.body.appendChild(canvas);

The canvas element shows up as blank white. The base64 string is valid, but it is also blank white (as expected i suppose).

On a separate, but less important note. I had a bug in safari only, where if the element has display:inline-block, the canvas would be empty. I had to change it to display:inline-flex for the canvas to load properly-ish

Specifications:

• html2canvas version tested with: v1.0.0-alpha.12
• Browser & version: Safari 10.1.2
• Operating system: OSX Yosemite 10.10.5

[Mivnv]

+1

[Dragooon]

I sent a PR to fix this issue

[Gunyon]

the same problem also with react-country-flag svgs