Fabric.js : Text not render correct with charSpacing in safari browser.

[niketaOptimumnbrew]

Hey,

Fabric.js version 5.3.0

I have encountered one issue with text in safari browser , that text's gets cut off when charSpacing is 0 and font Weight is 'bold'.

The following is my code:
////////////////////////////////////////////////////////////////////////////
var canvas = new fabric.Canvas("canvas");
fabric.Object.prototype.objectCaching = false;

var font_family = "Roboto-Regular";
var font = new FontFaceObserver(font_family);

var Text = new fabric.Textbox("ADD HEADING TEXT", {
left: 210,
top: 261,
fontSize: 69,
width: 630,
textAlign: 'left',
fontWeight:'bold',
fill: 'black',
charSpacing:0,
strokeWidth: 0,
stroke: '#ffffff',
shadow: {
"color": "#000000",
"blur": 0,
"offsetX": 0,
"offsetY": 0,
"affectStroke": false
},
hasRotatingPoint: true,
isLocked: false,
shadow_theme_index: undefined,
});

font.load().then(function() {
fabric.util.clearFabricFontCache(font_family);
Text.set("fontFamily", font_family);
canvas.requestRenderAll();
});

canvas.add(Text);
////////////////////////////////////////////////////////////////////////////

Please check below image (safari browser):

Text should show within the bounding box, Like below image (chrome browser):

[mhieupham1]

any jsfiddle for example code ? i think if you use jsfiddle to show everyone, it easier to hotfix @niketaOptimumnbrew

[niketaOptimumnbrew]

@mhieupham1
Please check below fiddle :
https://jsfiddle.net/Niketa_patel/6rbq4Lz8/25/

[mhieupham1]

@niketaOptimumnbrew i can't explain why, but when i calc the width and height of the text without using cache, it gives correct result

try https://jsfiddle.net/50e6t879/2/