Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

getBBox() returns zero when element not in render tree #4180

Closed
ischanx opened this issue Mar 3, 2023 · 0 comments · Fixed by #4181
Closed

getBBox() returns zero when element not in render tree #4180

ischanx opened this issue Mar 3, 2023 · 0 comments · Fixed by #4181
Labels
Status: Triage Needs to be verified, categorized, etc Type: Bug / Error Something isn't working or is incorrect

Comments

@ischanx
Copy link
Contributor

ischanx commented Mar 3, 2023

Description

There are two cases where getBBox() method of an SVG element returns zero.

The first case is when the SVG element has not been added to the DOM tree, for example, when it is created dynamically via JavaScript but has not been added to the DOM yet. In this case, the method returns a DOMRect object with all x, y, width, and height properties set to zero, indicating that the bounding box is unknown.

The second case is when the SVG element is in the DOM but is not rendered, for example, when its display property is set to none or its parent element is not rendered. In this case, even though the SVG element exists in the DOM, getBBox() method still returns a DOMRect object with all x, y, width, and height properties set to zero, indicating that the bounding box is unknown.

If the result of getBBox() is incorrect, the layout result will also be incorrect. Rerender can fix it

But all subsequent results will also be incorrect when an incorrect bounding box is cached. (such as Lodash.memoize)

Steps to reproduce

  1. document.body.style.display = "none"
  2. render
  3. document.body.style.display = "block"

Screenshots

image

Code Sample

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>Mermaid Quick Test Page</title>
    <link
      rel="icon"
      type="image/png"
      href="data:image/png;base64,iVBORw0KGgo="
    />
    <style>
      div.mermaid {
        /* font-family: 'trebuchet ms', verdana, arial; */
        font-family: "Courier New", Courier, monospace !important;
      }
    </style>
  </head>

  <body>
    <h1>Sequence diagram demos</h1>
    <pre class="mermaid">
      sequenceDiagram
      autonumber
      Alice->>John: Hello John,<br>how are you?
      autonumber 50 10
      Alice->>John: John,<br />can you hear me?
      John-->>Alice: Hi Alice,<br />I can hear you!
      autonumber off
      John-->>Alice: I feel great!
    </pre>
    <hr />

    <script type="module">
      document.body.style.display = "none";
      import mermaid from "https://cdn.jsdelivr.net/npm/[email protected]/+esm";
      setTimeout(() => {
        document.body.style.display = "block";
      }, 100);
    </script>
  </body>
</html>

Setup

  • Mermaid version: all
  • Browser and Version: all

Additional Context

There are two ways to fix this cache problem:

  1. throw Error to block the script
  2. delete the wrong cache when getBBox() returns zero

I prefer to choose the first way to fix this problem
@ischanx ischanx added Status: Triage Needs to be verified, categorized, etc Type: Bug / Error Something isn't working or is incorrect labels Mar 3, 2023
@ischanx ischanx mentioned this issue Mar 3, 2023
Merged
@ischanx ischanx changed the title getBBox() return zero when element not in render tree getBBox() returns zero when element not in render tree Mar 3, 2023
@luin luin mentioned this issue May 29, 2023
Merged
4 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Status: Triage Needs to be verified, categorized, etc Type: Bug / Error Something isn't working or is incorrect
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix(squence): getBBox() returns zero ischanx/mermaid
1 participant
@ischanx