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.

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

Flowcharts do not work in native IE11 #303

Closed
chris5287 opened this issue Feb 17, 2016 · 13 comments
Closed

Flowcharts do not work in native IE11 #303

chris5287 opened this issue Feb 17, 2016 · 13 comments

Comments

@chris5287
Copy link

When using native IE11, flowcharts do not render correctly (missing text, small diagrams)

ie11 flowchart

@knsv
Copy link
Collaborator

knsv commented Feb 18, 2016

Ok, thanks for reporting. Will take a look.

@chris5287
Copy link
Author

Any updates?

@knsv
Copy link
Collaborator

knsv commented Mar 11, 2016

Sorry, for the slow response. I am currently very busy in another project.

It seems IE11 requires some xml info in the elements in the foreign objects tag. One can configure to use non foreign objects though.

xmlns="http://www.w3.org/1999/xhtml"

Not sure if thats all though.

@knsv
Copy link
Collaborator

knsv commented Mar 12, 2016

Fixing this by updating the non-html labels. The non-html labels are improved with with background covering the edge for edge labels and possibility to use br to do row breaks.

@ivy88
Copy link

ivy88 commented Mar 16, 2016

I tested the latest commit on IE11...

I see text if mermaid is initialized with htmlLabels:false, no text if htmlLabels:true. Is this intended behaviour?

@knsv
Copy link
Collaborator

knsv commented Mar 16, 2016

@ivy88, yes it is! I am about to update the doc site to use the htmlLabels:false. With the new changes allowing background color and row breaks etc using non-html labels there is really no reasaon for the html labels anymore. Will keep them for backwards compatability though.

@ivy88
Copy link

ivy88 commented Mar 16, 2016

Perfect, thanks!

@dhvanish
Copy link

Is this change released ?

@dhvanish
Copy link

This change is working in the code
https://github.com/knsv/mermaid/tree/d6363e908df4f3f5cfa058c13d3b938347296efa
but not in the master.

Could you please check ?

@sifb
Copy link
Contributor

sifb commented Nov 24, 2016

Hi,

This change to initialize with htmlLabels:false does make the labels appear in IE11, which is great.

Is it possible you could add it to the live_editor demo site? At the moment something like this

http://knsv.github.io/mermaid/live_editor/#/edit/JSUgU3ViZ3JhcGggZXhhbXBsZQogZ3JhcGggVEIKICAgICAgICAgc3ViZ3JhcGggb25lCiAgICAgICAgIGExLS0gInRlc3QiIC0tPmEyCiAgICAgICAgIGVuZAogICAgICAgICBzdWJncmFwaCB0d28KICAgICAgICAgYjEtLT5iMgogICAgICAgICBlbmQKICAgICAgICAgc3ViZ3JhcGggdGhyZWUKICAgICAgICAgYzEtLT5jMgogICAgICAgICBlbmQKICAgICAgICAgYzEtLT5hMg

Still renders with no labels in IE11. (And the documentation site is the same, but you've mentioned that already).

@JohnPickerill
Copy link

Does not seem to work in IE if using the mermaid.init function to render graphs that aren't there when the page is first loaded (is fine in Chrome)

var renderMermaid = function(){
var config = {
startOnLoad:false,
flowchart:{
useMaxWidth:false,
htmlLabels:false
}
};
//mermaid.initialize(config);
mermaid.init(config,".algorithm")
}

@jaseeey
Copy link

jaseeey commented Feb 14, 2017

I'm able to replicate the issue where HTML labels do not appear in IE. When setting htmlLabels to false, I am able to see the labels in IE, however, I require the use of labels so it's not a suitable fix. Are there any updates on what is causing this? Do we know if it's the way IE is rendering the SVG?

@tylerlong
Copy link
Collaborator

We've decided to give up IE due to lack of contributors. We do want to support MS Edge browser.

tigefa4u pushed a commit to tigefa4u/gitlabhq that referenced this issue Apr 26, 2019
Flowcharts appear to be missing styles if HTML tags are disabled
for flowchart labels. They appear to disabled because some browsers
mermaid-js/mermaid#303 may omit labels
if they are present, but in testing with Microsoft Edge this
doesn't appear to be an issue now.

Closes https://gitlab.com/gitlab-org/gitlab-ce/issues/60869
tigefa4u pushed a commit to tigefa4u/gitlabhq that referenced this issue Apr 26, 2019
Flowcharts appear to be missing styles if HTML tags are disabled
for flowchart labels. They appear to disabled because some browsers
(mermaid-js/mermaid#303) may omit labels
if they are present, but in testing with Microsoft Edge this
doesn't appear to be an issue now.

Closes https://gitlab.com/gitlab-org/gitlab-ce/issues/60869
mgenereu pushed a commit to mgenereu/mermaid that referenced this issue Jun 25, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

8 participants