Hacktoberfest 2026 : les issues que les mainteneurs ont marquées pour octobre, ouvertes et accessibles aux débutants. Parcourir les issues Hacktoberfest

Mermaid diagrams render labels incorrectly when using Safari

Ouverte
  • Quelque chose ne va pas ?
#8,288 5 commentaires 1 réaction 0 personnes assignées Voir sur GitHub

Les mainteneurs répondent en général sous 1 jour

Personne n'a encore pris cette issue.

Évaluation

Difficulté
4/5
Temps estimé
3-5 jours
Accessibilité débutants
38/100
Type d'issue
Bug
Clarté
Plutôt claire
Activité
À l'abandon
Stack technique
javascript
Domaine
frontend

Piste de recherche

Aucun fichier source ni test n’est nommé. Reproduisez d’abord l’exemple Mermaid dans Safari 18.6 sur macOS et comparez-le avec Firefox et les versions de Nextcloud indiquées ; suivez ensuite le chemin de rendu Mermaid de Collectives. Le travail est terminé lorsque les libellés sont correctement positionnés dans Safari sans provoquer de régression dans les cas qui fonctionnent.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Description

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

Langage dominant
JavaScript
Étoiles
665
Forks
133
Merge moyen
1 j 17 h
PR mergées (30 j)
172

Préparer son environnement

Par où commencer

  1. Lisez l'issue en entier, puis le guide de contribution du projet.
  2. Signalez en commentaire que vous la prenez — cela évite que deux personnes fassent le même travail.
  3. Forkez le dépôt et travaillez sur une branche.
  4. Ouvrez une pull request qui référence le numéro de l'issue.

Autres issues de nextcloud/text

Toutes les issues de nextcloud/text

Issues similaires

Plus d'issues JavaScript

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.