4

I modified this and am moving this comment to the top.

In keeping with Stackoverflow, this could be a bug in some underlying things that no one can fix. But I will consider the best method you propose keeping within the framework of our application to remove the spurious attribute as the solution. It would be unfair otherwise.

I have an oddity I am trying to solve which is baffling. First, it's unclear that it is IE except this behavior does not happen on Chrome or Firefox. We are using charting libraries from Anychart and D3 to generate SVGs on a page. All of this is great. The application is a printing application and extracts the resolved css + html into a separate div and sends this via REST to a formatting service.

The issue lies only in IE and only with the Anychart chart. If you examine this page:

http://www.xportability.com/XEPOnline/FOTestSuite.html

And look toward Image Example #4, you will see a chart. Using IE and DOM explorer, you will see this:

Explorer DOM

All looks fine. In fact all is fine if that was "real". If you use javascript to extract that SVG in anyway (simplest method is copy HTML in Explorer DOM), you will see that this element's HTML is actually:

 <svg xmlns="http://www.w3.org/2000/svg" width="800" height="600" xmlns="http://www.w3.org/2000/svg">

Even using document.getElementById("anychart").outerHTML in console returns this element this way.

Note the double declaration of the namespace. Well, that is the issue as that is an error.

  • It does not happen on the D3 chart, nor the static chart. only this chart.
  • It does not happen in Chrome nor Firefox.
  • And most odd, it does not even display this way in IE's own DOM explorer.

Am I missing something here? Is there something else we are doing that is making IE do this?

NOTE: I am not looking for answers like apply the regex against the serialized string or such. We can do that (in fact we already do) to close empty (non-closed) HTML tags to make valid XML.

NOTE2: I am not discounting the fact that this could exists in the underlying Anychart JS library used or be a bug in Internet Explorer. It does only appear using Anychart library. They have been contacted to comment. However, the fact that IE shows only one namespace in the DOM explorer and then two when exporting is suspect that it is an IE issue potentially. They have also been contacted through their support.

So, I understand there may be no "answer" to this question .. it could be a bug in another library or in a browser.

As such, this demo only works in Chrome and Firefox for the moment ... until we hack around this or solve in some other way.

Kevin Brown
  • 8,805
  • 2
  • 20
  • 38
  • Can you create a fiddle with the code relative to the example #4 and posted it back, to recreate the bug, in order to have room to fix it? – Hackerman Jul 24 '14 at 19:48
  • 1
    OK, here is a fiddle cut down. http://jsfiddle.net/C4vJE/1/ Run, click the click me and see. IE = double namespace, other browsers no. There is nothing special here. Better yet, use IE and DOM explorer and look at the result = one namepsace, not two. – Kevin Brown Jul 24 '14 at 20:43
  • Just one more thing...IE version – Hackerman Jul 24 '14 at 21:39
  • Using 11. Would be interested if folks see the issue in other versions to comment please. – Kevin Brown Jul 24 '14 at 21:59
  • Also a few other comments. It does not matter what language I use to extract the HTML content. This fiddle uses JQuery, but I have used pure JS and even if you go to IE DOM Explorer, click the SVG and say "edit HTML" ... you see double namespace. – Kevin Brown Jul 24 '14 at 22:02
  • It can be as simple as `innerHTML` method outputting HTML which has been "fixed" by IE (so, at any point your HTML shouldn't be invalid - which namespaceless SVG is). It's still weird and I'm stumped here as well. I guess if you require one attribute to be there in your output, you can use `removeAttribute` which strips out the proper attribute one out. (ah - here's my debugging of the issue: http://jsfiddle.net/C4vJE/2/) – eithed Jul 24 '14 at 23:29
  • @eithedog Thanks for that. Stumped is the real question. And yes, our solution is relying on valid XML which would disallow repeated attributes. This element is invalid. You cannot have two "foo" attributes. Your solution is very good, thanks. We have yet to implement a final workaround for this but since we already apply a regex to apply closing "img" tags, we might as well do it then against the string html content. – Kevin Brown Jul 24 '14 at 23:59
  • And to be clear @eithedog, the overall application scrapes all the content of a div, resolves all external css references, cleans up issues with non-closing tags and submits to a service that takes in XML and makes PDF. We have a stylesheet that converts all the css to XSL FO. So it relies on valid XML as input. And two identical attributes are not valid as is. If I was adding them to the DOM in anyway, I would expect the latter to override the former ... but I would never expect to ask for the serialized version and get two. – Kevin Brown Jul 25 '14 at 00:28
  • 1
    In doing some research, this seems related ... http://stackoverflow.com/questions/19610089/unwanted-namespaces-on-svg-markup-when-using-xmlserializer-in-javascript-with-ie?rq=1 – Kevin Brown Jul 25 '14 at 00:47
  • Side note: please use a max-width for the content of your site. It is very hard to read even on my laptop because each sentence is strung across the entire page – Zach Saucier Jul 25 '14 at 03:07
  • @ZachSaucier ... good point, we will do that! And ... just saying, you could push the "Print It!" button and (if you have Chrome or Firefox) you would get a PDF of the site. You do make a good point though and we will adjust it. – Kevin Brown Jul 25 '14 at 05:29

1 Answers1

0

After deep analysis Anychart Javascript library was the culprit. They fixed the bug and this does not happen anymore.

Kevin Brown
  • 8,805
  • 2
  • 20
  • 38