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

generated SVG causes errors in Firefox Dev Tools #33

Open
joyously opened this issue Mar 24, 2020 · 2 comments
Open

generated SVG causes errors in Firefox Dev Tools #33

joyously opened this issue Mar 24, 2020 · 2 comments

Comments

@joyously
Copy link
Contributor

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>
@joyously
Copy link
Contributor Author

This is what I see in the browser console for the above test HTML (once I try to open Dev Tools).
Screenshot_2020-03-24_16-41-09

joyously referenced this issue Jul 6, 2020
@IllyaMoskvin
Append dummy to body instead of head (#34)
234ddcf 
Fix by @nikhiltri. Appending dummy to `head` creates invalid HTML:
  - Stray end tag `head`.
  - Start tag `body` seen but an element of the same type was
    already open.
This in turn can create accessibility concerns if certain devices
are unable to parse this invalid HTML.
@joyously
Copy link
Contributor Author

joyously commented Jul 6, 2020

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.

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
1 participant
@joyously