SVG Element not extended in Firefox 11

[blaher]

http://www.allenkeith.com/remodeling-areas-served

This only happens on the new Firefox 11, it works fine on previous versions, but shoots out an error "Error: $("svg2").setStyle is not a function Source File: http://www.allenkeith.com/inc/script/ohio.js Line: 13". I'm working on it for an unreleased version of my map, and noticed it stopped working after my Firefox updated.

[blaher]

I should probably mention, if I comment that line out (which is really no longer needed), I then get "Error: element[name] is undefined
Source File: http://www.allenkeith.com/inc/script/mootools/new.js
Line: 3072".

I have also updated to 1.4.5 on the newer version, but get the same error, except the second error reads "Error: f[a] is undefined
Source File: ...
Line: 234".

[arian]

For some reason the <svg> tag isn't a instance of Element anymore...

For example try

$('svg2') instanceof Element

in firefox or chrome, firefox returns false and chrome returns true.
Though you'd think the <svg> element in a HTML document would be an Element, which would have Element.prototype so all the MooTools methods.

[arian]

However

document.createElement("svg") instanceof HTMLElement

returns true in Firefox 12.

[arian]

but it does look like mootools does something somewhere:

With MooTools: http://jsfiddle.net/f36kT/1/
No framework: http://jsfiddle.net/f36kT/2/

[egiguet]

I met the same problem on my maps. Should I wait or shoud I go ?!

[w8r]

And on my maps, too. It breaks the whole thing hopelessly because of the events.

[w8r]

However, it works with 1.2.5 http://jsfiddle.net/ctqyR/.

[blaher]

Has anyone been able to make a work around for this, for the time being? With Arian's findings, I thought about inserting a new SVG element, and injecting all the contents and attributes of the other SVG element in to the new one, and then delete the old one (just for FF11). However, without any MooTool's functions being attached to the old element, my memory has been proving difficult to do it the old school JS way. Plus,I'm not sure if this will entirely work, but theoretically it should.

[w8r]

It won't. It won't even render, in my opinion. I used downgrading to 1.2.5 as a workaround. Since I have a project of many thousands of lines of code, which I had already painfully upgraded to 1.3 several moths ago, I couldn't do it gracefully, so I just built my own version of compatibility layer and included it into .more.

Now I'm waiting until either FF or Mootools would fix this bug. I put my hope rather in Mootools team.

[pveiga]

I'm facing the same issue too. Any idea how to hack it ?

[oskarkrawczyk]

Anyone from the core team care to share a patch before it hits the official release?

This is really messing with my zen...

[arian]

Ok, so the problem is this, MooTools does something like:

Browser.Element = window.Element;
var Element = function(tag, properties){
    // do stuff
};
Element.prototype = Browser.Element.prototype;

That way the prototypes are shared.
For some unknown reason however, the new methods in Browser.Element.prototype don't show up in the prototype chain of SVGSVGElement.

In plain js:

var OldElement = window.Element;
var svg = document.getElementsByTagName('svg')[0];
console.log(svg);

// svg is an instance of OldElement
console.assert(svg instanceof OldElement);

// implement new property in OldElement
OldElement.prototype.test = 'test';

// Now because svg is an instance of OldElement, it should have this property
// but it has not
console.assert(svg.test == 'test', 'svg.test should come from SVGSVGElement.prototype');
// while a normal element has
console.assert(document.body.test == 'test', 'document.body.test should come from HTMLElement.prototype');

here the svg.test == 'test' assertion fails in firefox.

So as far as I could see this is a Firefox bug.
/cc @sebmarkbage, @jdalton, @kamicane.

[arian]

Actually this already fails (in plain js):

Element.prototype.test = 'test';
var svg = document.getElementsByTagName('svg')[0];
console.assert(svg.test == 'test');

[arian]

reported to firefox: https://bugzilla.mozilla.org/show_bug.cgi?id=740811