nextcloud / nextcloud/text

Mermaid diagrams render labels incorrectly when using Safari

Open
#8,288 5 comments 1 reaction 0 assignees View on GitHub

Nobody has claimed this yet.

bug feature: code syntax highlighting
Dominant language
JavaScript
Stars
659
Forks
133
Avg merge
1d 20h
Merged PRs (30d)
110

Description

Description

Labels in Mermaid diagrams render incorrectly in the Collectives app when using Safari.
The diagram shapes and arrows render correctly, but all text labels (node labels and edge labels) are shifted to the top of the diagram and overlap each other, making them unreadable.

Occurence details
The issue occurs in Safari 18.6 on macOS when using Nextcloud 32.0.6 with Collectives 3.6.1.
It does not occur in Firefox 146.0.1 on the same system.
It also does not occur in Safari for Nextcloud version 30.0.16.

Additional information
This issue was previously described (including screenshots) in the Nextcloud forum: Mermaid does no longer render correctly in collectives
The forum thread was automatically closed after 90 days without resolution, and the issue still persists.

I hope this issue is reported with sufficient information in the correct repository now. If not, I apologize and would appreciate guidance on where it should be filed instead.

To Reproduce

Use Safari on macOS!

  1. Go to any Collective page
  2. Insert a Mermaid code block, for example:
graph TD
    A[Start] --> B[Process]
    B --> C[End]
  1. Observe the rendered version of the diagram either as preview or after saving the page.

Current behaviour
In Safari, the diagram labels overlap at the top of the diagram and are unreadable.

Expected behavior
Mermaid diagrams should render with correctly positioned labels in Safari, as they do in Firefox 146.0.1 and in Nextcloud 30.0.16.
(GitHub also renders it correctly in Safari on macOS)

graph TD
    A[Start] --> B[Process]
    B --> C[End]
Screenshot
Image
Further details

Server details
Collectives app version: 3.6.1
Nextcloud version: 32.0.6
PHP Version: 8.3.30
Database: MySQL 10.11.14
Hosting type: Managed hosting

Client details
OS: macOS
Browser: Safari
Browser version: 18.6
Device: Desktop

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

No source file or test is named. First reproduce the Mermaid example in Safari 18.6 on macOS and compare it with Firefox and the listed Nextcloud versions; then trace the Collectives Mermaid rendering path. Done means labels are positioned correctly in Safari without regressing the working cases.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
38/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.