generated SVG causes errors in Firefox Dev Tools #33
Description
As crazy as it sounds, it appears that this polyfill messes up recent Firefox Developer Tools.
I haven't been using Firefox Dev Tools much until lately, so I'm not sure which versions are affected. Since it is also happening in the latest version of SeaMonkey, which did not have this problem before, I noticed it.
It seems that both browsers may have issues with SVGs. I don't know if this is a browser bug (for both browsers) or if there is something wrong with the SVG that is output by this polyfill.
Given this small test page (below), open it in recent Firefox and Inspect the code in the Developer Tools. The style pane of the Inspector tab will be empty. You can see the errors in the browser console.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Test of conic gradient polyfill affecting Dev Tools</title>
<style>
body { background-color: white; color: black;}
p {margin: 1em 0.5em;}
body {
background-image: repeating-conic-gradient(hsla(52,100%,85%, 0.16) 0deg,
hsla(52,100%,95%, 0.005) 7deg, hsla(52,100%,90%, 0.15) 11deg);
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<script src="http://leaverou.github.io/conic-gradient/conic-gradient.js"></script>
</head>
<body>
<p>Open the Firefox Dev Tools (Ctrl-Shift-I) and see if the Inspector pane shows the styles.</p>
<p>If the styles are not there, then open the Firefox Browser Console (Ctrl-Shift-J) and you will see the errors.</p>
<p>Regardless, you can look in the Style Editor tab to see the SVG generated by the polyfill.</p>
<p>With a minor change to the polyfill to output PNG instead of SVG, the errors go away.</p>
<br>
</body>
</html>