getBoundingClientRect() returns different values in Chrome and FireFox

[tjohannto]

My problem is that in the piechart legend the event rects are sized differently in FireFox (66.0.2) and Chrome (73.0.3683.86).

The difference bases on line 10086 in c3.js:

ChartInternal.prototype.getTextRect = function (text, cls, element) {
    var dummy = this.d3.select('body').append('div').classed('c3', true),
        svg = dummy.append("svg").style('visibility', 'hidden').style('position', 'fixed').style('top', 0).style('left', 0),
        font = this.d3.select(element).style('font'),
        rect;
    svg.selectAll('.dummy').data([text]).enter().append('text').classed(cls ? cls : "", true).style('font', font).text(text).each(function () {
      rect = this.getBoundingClientRect();
    });
    dummy.remove();
    return rect;
  };

example: http://jsfiddle.net/q6gzr4th/
rect = this.getBoundingClientRect();
The getBoundingClientRect() function returns height = 13.328 for Chrome (which I would assume correct for my CSS settings, isn't it?) and height = 16 for Firefox.

Is there a way to fix that and ensure compatibility for both browsers?

Maybe use getBBox() instead of getBoundingClientRect()