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

Mermaid resets some of the page CSS styles #482

Closed
anatoliykmetyuk opened this issue Feb 23, 2017 · 6 comments
Closed

Mermaid resets some of the page CSS styles #482

anatoliykmetyuk opened this issue Feb 23, 2017 · 6 comments

Comments

@anatoliykmetyuk
Copy link 

<head>
  <!-- ... -->
  <link rel="stylesheet" href="/assets/css/all.css">
  <link rel="stylesheet" href="https://cdn.rawgit.com/knsv/mermaid/7.0.0/dist/mermaid.css">
  <script src="https://cdn.rawgit.com/knsv/mermaid/7.0.0/dist/mermaid.min.js"></script>
  <script>mermaid.initialize({startOnLoad: true;});</script>
</head>
<body>
<div class="mermaid">
graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;
</div>
<h1>Foo</h1>

The page is deployed on a local Jekyll server. The h1 styling set by all.css is displayed correctly up until the point when the graph is rendered. The behavior is hard to reproduce: I was not able to reproduce it outside of my own blog served locally via Jekyll. Given this, can you please suggest a quick fix that would guarantee that mermaid will have absolutely no effect beyond a tag I have specified? I do not want it to influence anything else but the contents of the tag I am trying to render.
@anatoliykmetyuk
Copy link
Author

anatoliykmetyuk commented Feb 23, 2017 •
edited
Loading

I have created a repository that reproduces this bug.

Steps to reproduce:

  1. git clone https://github.com/anatoliykmetyuk/mermaid-482-reproduction.git
  2. cd mermaid-482-reproduction
  3. bundle exec jekyll serve
  4. Navigate to localhost:4000
  5. Look closely at the large "Foo" text below the graph. Before the graph is rendered, it is displayed in large font, after - in small.
  6. Remove this div. Reload the page. Notice how "Foo" is displayed in large text.

Relevant lines of code: 3 lines here, 2 lines here.

Also: if you remove this line that requests CSS and reload the page, the page will not be styled, but the graph will not change the styling on load.

Any ideas on why this happens and how to fix it?

@anatoliykmetyuk
Copy link
Author

Removing body, div, span from this line seems to have solved the issue. Strange.

@knsv
Copy link
Collaborator

knsv commented Feb 24, 2017 via email

@itamarst
Copy link

itamarst commented Mar 1, 2017 •
edited
Loading

Passing in option cloneCssStyles: false in the configure object passed to mermaid.initialize() fixes a similar problem for me:

<script>mermaid.initialize({
       startOnLoad: true,
       cloneCssStyles: false
     });
</script>

@StingyJack
Copy link

I had a different element style collision with bootstrap - bootstrap was overriding the styles used by the rendered svg. I ended up commenting out the bootstrap.less styles that I didnt need and run a gulp-less on that.

@tylerlong
Copy link
Collaborator

The issue has been fixed. Now all mermaid CSS are scoped within its own ID so it won't pollute global CSS.

@QuidamAzerty QuidamAzerty mentioned this issue Jul 10, 2023
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
5 participants
@tylerlong @anatoliykmetyuk @itamarst @knsv @StingyJack