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

Created on 30 Jul 2018  路  3Comments  路  Source: niklasvh/html2canvas

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
picture stevencherry1
👍11

Most helpful comment

I sent a PR to fix this issue

picture Dragooon on 7 Sep 2018
🎉3 👍1

All 3 comments

+1

Mivnv picture Mivnv on 6 Sep 2018

I sent a PR to fix this issue

Dragooon picture Dragooon on 7 Sep 2018
🎉3 👍1

the same problem also with react-country-flag svgs

Gunyon picture Gunyon on 26 Jan 2019
Was this page helpful?
0 / 5 - 0 ratings

Related issues

wbarrantes picture wbarrantes  路  3Comments
Josh10101010 picture Josh10101010  路  3Comments
tjchambers32 picture tjchambers32  路  3Comments
ABHIKSINGHH picture ABHIKSINGHH  路  3Comments
bishwapoudel picture bishwapoudel  路  4Comments