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

Most helpful comment

I sent a PR to fix this issue

All 3 comments

+1

I sent a PR to fix this issue

the same problem also with react-country-flag svgs

Was this page helpful?
0 / 5 - 0 ratings

Related issues

AlphaDu picture AlphaDu  路  4Comments

ABHIKSINGHH picture ABHIKSINGHH  路  3Comments

celik75 picture celik75  路  4Comments

yasergh picture yasergh  路  5Comments

koreanman picture koreanman  路  4Comments