diff --git a/.changeset/dry-plums-glow.md b/.changeset/dry-plums-glow.md
new file mode 100644
index 0000000000..810c6c5c87
--- /dev/null
+++ b/.changeset/dry-plums-glow.md
@@ -0,0 +1,5 @@
+---
+'mermaid': minor
+---
+
+Fix for issue with calculation of label width when using in firefox
diff --git a/packages/mermaid/src/rendering-util/createText.ts b/packages/mermaid/src/rendering-util/createText.ts
index 845705210f..4b66334938 100644
--- a/packages/mermaid/src/rendering-util/createText.ts
+++ b/packages/mermaid/src/rendering-util/createText.ts
@@ -20,6 +20,11 @@ function applyStyle(dom, styleFn) {
 
 async function addHtmlSpan(element, node, width, classes, addBackground = false) {
   const fo = element.append('foreignObject');
+  // This is not the final width but used in order to make sure the foreign
+  // object in firefox gets a width at all. The final width is fetched from the div
+  fo.attr('width', `${10 * width}px`);
+  fo.attr('height', `${10 * width}px`);
+
   const div = fo.append('xhtml:div');
   let label = node.label;
   if (node.label && hasKatex(node.label)) {
@@ -201,7 +206,7 @@ export const createText = async (
   } = {},
   config: MermaidConfig
 ) => {
-  log.info(
+  log.debug(
     'XYZ createText',
     text,
     style,