first sandbox isn't working in firefox

[Yokozuna59]

Description

This issue has been taken from this thread: #4514 (comment), and we filed the issue so we could merge that PR, and we won't forget about it until we figure out how to resolve this.

Steps to reproduce

I've changed /demos/info.html config to this:

<script type="module">
  import mermaid from './mermaid.esm.mjs';
  mermaid.initialize({
    theme: 'forest',
    logLevel: 3,
-   securityLevel: 'loose',
+   securityLevel: 'sandbox',
  });
</script>

The first would fail, but others would work fine:

Not sure why yet, maybe a variable has been defined after first one, that's why e2e testing is failing.

What is being logged:

#4514 (comment)

---

The above screenshot is in firefox, but it works fine in chrome:

#4514 (comment)

---

After more debugging, when I added the following line of code in /packages/diagrams/info/infoRenderer.ts:

if (securityLevel === 'sandbox') {
  const sandboxElement: HTML = select('#i' + id);
  document = sandboxElement.node()?.contentDocument;
+ log.info(document?.body)
}

It shows that the body is being use in the first time is the parent one, not sub body of iframe element:

#4514 (comment)

Screenshots

No response

Code Sample

No response

Setup

• Mermaid version: 10.3.0
• Browser and Version: Firefox

Suggested Solutions

No response

Additional Context

No response