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

Incorrect iframe height on some diagrams like pie #4289

Open
silverwind opened this issue Apr 11, 2023 · 0 comments
Open

Incorrect iframe height on some diagrams like pie #4289

silverwind opened this issue Apr 11, 2023 · 0 comments
Labels
Graph: Pie Status: Triage Needs to be verified, categorized, etc Type: Bug / Error Something isn't working or is incorrect

Comments

@silverwind
Copy link
Contributor

silverwind commented Apr 11, 2023 •
edited
Loading

Description

With securityLevel: "sandbox", mermaid will output an iframe, but it appears that on some charts like pie, this iframe's height does not match the SVG element. In the example below, svg height is 254px, but iframe height is 450px.

The iframe height does match the height value in viewBox but does not take into account that the SVG is scaled down, so its viewbox height does not match the rendered height. I think the fix will be to take into account the scaling of the SVG when calculating iframe height.

Steps to reproduce

https://mermaid.live/edit#pako:eNp1T7sOwjAM_BXLcwcYyQxISMBCB4YspnHBokmq1OUh1H8nbcXITafz3Vn3wSo6RoOtMKhow3DclNv97mwD_GCxFM_QtRwUmhjvEq5QxwQ-PoQtgoHV4p__SVrdxoDo5FwusEDPyZO4_Pcz5izqjX1uMpk6SneLxax3XPVJ9L3nBzfzvaPgLvFl0YYhV1Gv8fQOFRpNPRfYt46U10LXRB5NTU2XVXaiMR3mrdPk4Qsk6lBB

(Click cancel to preserve config)

Screenshots

Screenshot 2023-04-11 at 12 49 54

(color issue in iframe is a separate bug and can be fixed by adding color-scheme:normal to the iframe's CSS).

Setup

  • Mermaid version: 10.1.0
  • Browser and Version: all
@silverwind silverwind added Status: Triage Needs to be verified, categorized, etc Type: Bug / Error Something isn't working or is incorrect labels Apr 11, 2023
@silverwind silverwind mentioned this issue Apr 11, 2023
Merged
@silverwind silverwind changed the title Incorrect iframe height on some diagrams Incorrect iframe height on some diagrams like pie Apr 11, 2023
silverwind added a commit to go-gitea/gitea that referenced this issue Apr 17, 2023
@silverwind @GiteaBot
Fix math and mermaid rendering bugs (#24049)
dcde470 
1. Fix multiple error display for math and mermaid:


![err](https://user-images.githubusercontent.com/115237/231126411-8a21a777-cd53-4b7e-ac67-5332623106e8.gif)

2. Fix height calculation of certain mermaid diagrams by reading the
iframe inner height from it's document instead of parsing it from SVG:

Before:
<img width="866" alt="Screenshot 2023-04-11 at 11 56 27"
src="https://user-images.githubusercontent.com/115237/231126480-b194e02b-ea8c-4ddf-8c79-50c525815d92.png">

After:
<img width="855" alt="Screenshot 2023-04-11 at 11 56 35"
src="https://user-images.githubusercontent.com/115237/231126494-5fe86a48-8d21-455a-8b95-79b6ee27a16f.png">

3. Refactor error handling to a common function
4. Rename to `renderAsciicast` for consistency
5. Improve mermaid loading sequence

Note: I did try `securityLevel: 'sandbox'` to make mermaid output a
iframe directly, but that showed a bug in mermaid where the iframe style
height was set incorrectly. Opened
mermaid-js/mermaid#4289 for this.

---------

Co-authored-by: Giteabot <teabot@gitea.io>
@silverwind silverwind mentioned this issue May 11, 2023
Closed
@Yokozuna59 Yokozuna59 mentioned this issue Jun 18, 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
Graph: Pie 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

No branches or pull requests
2 participants
@silverwind @Yokozuna59