Hacktoberfest 2026: die Issues, die Maintainer für den Oktober markiert haben – offen und einsteigerfreundlich. Hacktoberfest-Issues durchsuchen

Mermaid diagrams render labels incorrectly when using Safari

Offen
  • Stimmt etwas nicht?
#8,288 5 Kommentare 1 Reaktion 0 zugewiesene Personen Auf GitHub ansehen

Maintainer antworten meist innerhalb von 1 Tag

Dieses Issue hat noch niemand übernommen.

Bewertung

Schwierigkeit
4/5
Geschätzter Aufwand
3-5 Tage
Anfängerfreundlichkeit
38/100
Issue-Typ
Bug
Klarheit
Größtenteils klar
Aktivitätsstatus
Veraltet
Tech-Stack
javascript
Bereich
frontend

Rechercherichtung

Es wird keine Quelldatei und kein Test genannt. Reproduziere zuerst das Mermaid-Beispiel in Safari 18.6 auf macOS und vergleiche es mit Firefox und den aufgeführten Nextcloud-Versionen; verfolge dann den Collectives-Mermaid-Rendering-Pfad. Erledigt ist die Aufgabe, wenn die Beschriftungen in Safari korrekt positioniert sind, ohne die funktionierenden Fälle zu beeinträchtigen.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Beschreibung

bug feature: code syntax highlighting
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

Vorherrschende Sprache
JavaScript
Sterne
665
Forks
133
Ø Merge
1 T. 17 Std.
Gemergte PRs (30 T.)
172

Entwicklungsumgebung

Erste Schritte

  1. Lesen Sie das ganze Issue und danach den Beitragsleitfaden des Projekts.
  2. Schreiben Sie ins Issue, dass Sie es übernehmen — das erspart doppelte Arbeit.
  3. Forken Sie das Repository und arbeiten Sie in einem Branch.
  4. Öffnen Sie einen Pull Request, der die Issue-Nummer nennt.

Mehr aus nextcloud/text

Alle Issues in nextcloud/text

Ähnliche Issues

Weitere Issues zu JavaScript

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.