Abnormal letter spacing in Chrome / Chromium

When calling:

html2canvas(document.getElementsByClassName('console'), {
      onrendered: function(canvas) {
        var img = canvas.toDataURL()
        var iframe = '<iframe src="' + img + '" frameborder="0" style="border:0; top:0px; left:0px; bottom:0px; right:0px; width:100%; height:100%;" allowfullscreen></iframe>'
        var x = window.open();
        x.document.open();
        x.document.write(iframe);
        x.document.close();
      },
      letterRendering: true,
    });

Both with or without letterRendering, this is what Chrome outputs:

When the output in Firefox is:

Any specific reason why it renders it like that?

[maaoui]

I have fixed this also by going to the div I want to screenshot and then I set the " font-variant: normal; " this has worked for me hope it helps .

[christopherkade]

I have found a workaround for the matter (and it’s not very clean):

// Package used to detect the browser used by the user
const browser = detect();
const element = document.getElementById('console');

// Set up my options
let options = {};
// For some reason foreignObjectRendering solves the spacing issue on Chrome but gives an error on Firefox, so I detect the browser and apply the adequate options.
if (browser && browser.name === 'chrome') {      
  options = {
    useCORS: true,
    foreignObjectRendering: true
  };  
}

// Open the canvas in a new window
html2canvas(element, options).then(function(canvas) {
  const url = canvas.toDataURL();
  const img = '<img src="' + url + '" style="border:0;"></img>'
  const x = window.open();
  x.document.open();
  x.document.write(img);
  x.document.close();
});

Note that the error I get on Firefox when using the second option is as follows:

Uncaught (in promise): [Exception… "Method not implemented" …