generated SVG causes errors in Firefox Dev Tools
Opened this issue · 2 comments
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>
This is what I see in the browser console for the above test HTML (once I try to open Dev Tools).
I just installed the latest Firefox 78 on Ubuntu and it appears to have fixed the Dev Tool problem. I no longer get all the errors in the browser console, and I do see the styles again in Dev Tools, although it is very slow. This is from my local copy of the polyfill. When I try the test case above, there is an error.