Skip to content

Error in flowchart image-shape when using svg on FireFox #6362

Open
@Limbend

Description

@Limbend

Description

Detected when using FireFox:
If you use an svg file as an image and activate the constraint option, the block scheme is not rendered correctly.
Received errors:

Unexpected NaN value when analyzing the width attribute. CHyiqE_3.js:96:19013
Unexpected NaN value when analyzing the height attribute. CHyiqE_3.js:96:19013
Unexpected translate(NaN,NaN) value when analyzing transform attribute. CHyiqE_3.js:96:19013
Unexpected translate(-52.19999694824219,NaN) value when analyzing the transform attribute. CHyiqE_3.js:96:19013
Unexpected translate(-52.19999694824219,NaN) value when analyzing the transform attribute. C9j3OrOs.js:16:39462
Unexpected value of translate(NaN,NaN) when analyzing the transform attribute. C9j3OrOs.js:16:39462
Unexpected value of NaN when analyzing height attribute. C9j3OrOs.js:16:39462
Unexpected NaN value when analyzing width attribute. C9j3OrOs.js:16:39462

If you use Google Chrome, there is no problem.

Steps to reproduce

  1. Launch FireFox desktop browser.
  2. Create a flowchart diagram
  3. Add node image-shape
  4. Provide a link to the svg image
  5. Set constraint: on
  6. Get an error in the browser logs and a corrupted image

Or just use the ready-made code at mermaid.live

Screenshots

Image
Image
Image

Code Sample

TD flowchart
    ico@{img: “https://mermaid.js.org/favicon.ico”, h: 80, constraint: on, label: “ico/png/jpg”}
    constraintoff@{img: “https://mermaid.js.org/mermaid-logo.svg”, h: 80, constraint: off, label: “constraint: off”}
    constraintinton@{img: “https://mermaid.js.org/mermaid-logo.svg”, h: 80, constraint: on, label: “constraint: on”}
    Mermaid --> Firefox
    Firefox --> flowchartimg(flowchart img)
    flowchartimg --> ico
    ico ---> OK
    flowchartimg --> svg
    svg --> constraintoff
    svg --> constraintoff
    constraintoff --> itlooksbad.
    constraintinton --> ERROR

Setup

  • Mermaid version: 11.4.1
  • Browser and Version:
    • Firefox: 136.0

Suggested Solutions

No response

Additional Context

No response

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    Status: TriageNeeds to be verified, categorized, etcType: Bug / ErrorSomething isn't working or is incorrect

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions