{"action":"created","issue":{"url":"https://api.github.com/repos/knsv/mermaid/issues/126","labels_url":"https://api.github.com/repos/knsv/mermaid/issues/126/labels{/name}","comments_url":"https://api.github.com/repos/knsv/mermaid/issues/126/comments","events_url":"https://api.github.com/repos/knsv/mermaid/issues/126/events","html_url":"https://github.com/knsv/mermaid/issues/126","id":59943376,"number":126,"title":"module.exports.cloneCssStyles() in combination with Angularjs breaks display in Chrome and IE","user":{"login":"wolframst","id":1741760,"avatar_url":"https://avatars.githubusercontent.com/u/1741760?v=3","gravatar_id":"","url":"https://api.github.com/users/wolframst","html_url":"https://github.com/wolframst","followers_url":"https://api.github.com/users/wolframst/followers","following_url":"https://api.github.com/users/wolframst/following{/other_user}","gists_url":"https://api.github.com/users/wolframst/gists{/gist_id}","starred_url":"https://api.github.com/users/wolframst/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/wolframst/subscriptions","organizations_url":"https://api.github.com/users/wolframst/orgs","repos_url":"https://api.github.com/users/wolframst/repos","events_url":"https://api.github.com/users/wolframst/events{/privacy}","received_events_url":"https://api.github.com/users/wolframst/received_events","type":"User","site_admin":false},"labels":[],"state":"closed","locked":false,"assignee":null,"milestone":null,"comments":8,"created_at":"2015-03-05T12:10:33Z","updated_at":"2015-06-09T09:13:58Z","closed_at":"2015-06-07T15:45:28Z","body":"Hi Knut,\r\n\r\nThanks for this great library! It is really easy and intuitive to use.\r\n\r\nI am using mermaid together with Angularjs, what works fine by and large.\r\nWhen testing in different browsers, I noticed one issue that breaks display of Flowcharts in Chrome (latest version) and IE 10. In both browsers, all chart items appear completely black.\r\nUncommenting the lines below fixed the issue.\r\n\r\n```javascript\r\nmodule.exports.cloneCssStyles = function(svg, classes){\r\n  ...\r\n  if (typeof(rule.style) !== 'undefined') {\r\n    var elems = svg.querySelectorAll(rule.selectorText);\r\n      if (elems.length > 0) {\r\n        usedStyles += rule.selectorText + \" { \" + rule.style.cssText + \" }\\n\";\r\n      }\r\n  }\r\n  ...\r\n}\r\n```\r\n\r\nThe Javascript error is\r\n```javascript\r\nUncaught SyntaxError: Failed to execute 'querySelectorAll' on 'Element': '[ng:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak, .ng-hide:not(.ng-hide-animate)' is not a valid \r\nselector.\r\n```\r\n\r\nSearching for the problem, I found one link to a similar issue on github. The developer says that handling of invalid selector errors fixed the issue here. ( https://github.com/exupero/saveSvgAsPng/issues/11 )\r\n\r\nUncommenting the code did not have any negative impact on display, so this is a workaround for me.\r\nMaybe you can provide a fix in one of the next versions?\r\n\r\nThanks,\r\nWolfram"},"comment":{"url":"https://api.github.com/repos/knsv/mermaid/issues/comments/110285776","html_url":"https://github.com/knsv/mermaid/issues/126#issuecomment-110285776","issue_url":"https://api.github.com/repos/knsv/mermaid/issues/126","id":110285776,"user":{"login":"ma-zal","id":9009138,"avatar_url":"https://avatars.githubusercontent.com/u/9009138?v=3","gravatar_id":"","url":"https://api.github.com/users/ma-zal","html_url":"https://github.com/ma-zal","followers_url":"https://api.github.com/users/ma-zal/followers","following_url":"https://api.github.com/users/ma-zal/following{/other_user}","gists_url":"https://api.github.com/users/ma-zal/gists{/gist_id}","starred_url":"https://api.github.com/users/ma-zal/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/ma-zal/subscriptions","organizations_url":"https://api.github.com/users/ma-zal/orgs","repos_url":"https://api.github.com/users/ma-zal/repos","events_url":"https://api.github.com/users/ma-zal/events{/privacy}","received_events_url":"https://api.github.com/users/ma-zal/received_events","type":"User","site_admin":false},"created_at":"2015-06-09T09:13:58Z","updated_at":"2015-06-09T09:13:58Z","body":"To knsv: You are right, final SVG is OK. So, if i understand, this \"error\" is \"warning\" only, because all works. And my imagination is: Error causes some part of Angular, that tries to manipulate with DOM, and it is not possible to solve it."}}