generated SVG causes errors in Firefox Dev Tools

Open
#33 2 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
4/5
Estimated time
3-5 days
Newbie friendliness
30/100
Issue type
Bug
Clarity
Needs clarification
Activity status
Stale
Tech stack
css, javascript
Domain
frontend

Research direction

Start with the supplied test page and the generated SVG shown in the Style Editor, then inspect conic-gradient.js while reproducing the issue in Firefox and SeaMonkey Developer Tools. Compare the SVG behavior with the reported PNG variant. Done means the test page no longer causes console errors and the Inspector style pane displays the styles, or the issue is confirmed as a browser bug.

Written by the indexing model from the issue text.

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>
Dominant language
HTML
Stars
484
Forks
56
No merged PRs in 30d

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from LeaVerou/conic-gradient

All issues in LeaVerou/conic-gradient

Similar issues

More Web Dev issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.