Firefox 20.0 jquery TypeError: a.style is undefined when loading svg
I work with SVG file. SVG file has xlink-ed jquery. When opening svg file in Firefox 20.0 I get error TypeError: a.style is undefined. If I open svg file in Firefox 19 and older versions, no errors appears.
Any ideas why jqery with svg is not working in FF20.0?
My SVG demo file
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" width="467" height="462">
<rect x="80" y="60" width="250" height="250" rx="20"
style="fill:#ff0000; stroke:#000000;stroke-width:2px;" />
<rect x="140" y="120" width="250" height="250" rx="40"
style="fill:#0000ff; stroke:#000000; stroke-width:2px;
fill-opacity:0.7;" />
<script
xlink:href="http://code.jquery.com/jquery-1.9.1.js"
id="script10"
type="text/javascript" />
</svg>
Chosen solution
The problem seems to be that jQuery is creating a "div" element, then using div.innerHTML to fill it with children: "link", "table", and "a" tags.
Since this is within an SVG file, "div", "table", and "link" tags don't really exist.
In Firefox 19 (and Chrome 26.0.1410.43 m, and IE 9.0.8112.16421) trying to do div.innerHTML resulted in "undefined" children. In Firefox 20, it's actually making the "link", "table", and "a" children. This fools jQuery into thinking setting innerHTML inside the document.createElement("div") actually worked, until it tries to access "a.style", which is undefined. (The "a" tag has no attributes, not even "a.href".)
I'm not sure if the bug is that setting innerHTML on a javascript-created "div" inside an SVG file doesn't set the elements up the right way, or if it shouldn't be creating these elements in the first place! :s
But I was able to reproduce this behavior in Firefox 20, and in mozilla-central (I checked it out and built Firefox last night), and verified the old functionality in Firefox 19. This certainly seems to be behavior unique to Firefox 20.
Read this answer in context 👍 3All Replies (6)
Chosen Solution
The problem seems to be that jQuery is creating a "div" element, then using div.innerHTML to fill it with children: "link", "table", and "a" tags.
Since this is within an SVG file, "div", "table", and "link" tags don't really exist.
In Firefox 19 (and Chrome 26.0.1410.43 m, and IE 9.0.8112.16421) trying to do div.innerHTML resulted in "undefined" children. In Firefox 20, it's actually making the "link", "table", and "a" children. This fools jQuery into thinking setting innerHTML inside the document.createElement("div") actually worked, until it tries to access "a.style", which is undefined. (The "a" tag has no attributes, not even "a.href".)
I'm not sure if the bug is that setting innerHTML on a javascript-created "div" inside an SVG file doesn't set the elements up the right way, or if it shouldn't be creating these elements in the first place! :s
But I was able to reproduce this behavior in Firefox 20, and in mozilla-central (I checked it out and built Firefox last night), and verified the old functionality in Firefox 19. This certainly seems to be behavior unique to Firefox 20.
As a work-around for your problem (and it may be a pain to download, modify, and host jQuery yourself, but whatever's the issue with Firefox 20 may also take effort to resolve):
In http://code.jquery.com/jquery-1.9.1.js change line 1321:
From: if ( !all || !a || !all.length ) { To: if ( !all || !a || !all.length || !a.style ) {
This should cause the jQuery.support function to return {} (an empty object), as it seems to do on other browsers. In FF19, "!a" evaluates to true. In FF20 "!a" evaluates to false, but a.style is undefined. So checking for !a.style should avoid the error here.
Not sure if other areas of jQuery are affected, or what jQuery even supports when jQuery.support returns emptiness. Hope That Helps; I'm very new to the project.
Thanks for the advice. It works.
Probably worth creating a bugzilla bug (https://bugzilla.mozilla.org/) so we can decide whether the innerHTML change is by design or accidental.
Actually this is a bug in jquery http://bugs.jquery.com/ticket/13754 which has been fixed.
One of the replies posted suggested that this error was caused by a Firefox "add-on." The problem add-on in that case was "Shop-at-Home.Com Toolbar 6.0.6.0. I followed the directions--easy fix--and it solved the problem:
1. Open Firefox in "Safe Mode" and see if you get the same error message (I didn't). 2. Open Firefox in normal mode. 3. Go to "Tools," and click on "Add-Ons." 4. All the add-ons will come up. You can then click on Disable ALL, restart the computer and see if this solves the problem. If it does, you can restore one add-on at a time until you get the error message back and disable or remove that add-on. I took a chance and disabled only the add-on that this particular post recommended (i.e. Shop-at Home) and it worked perfectly so I disabled it and am no longer getting this message. It took all of 1-2 minutes to do.
Hope this helps.
Ron2013