Wie kann ich dieses Problem mit Firefox mit URL() lösen, so dass es in anderen Browsern nicht bricht?

Question

Ich rendere ein Diagramm mit D3, das im Laufe der Zeit animiert, Links zeigt, die entsprechend dem Fluss durch ein System ein- und ausgehen.

In meinem Diagramm habe ich Marker auf meinen Links mit marker-mid gerendert, um die Fließrichtung anzuzeigen (siehe meine prototype pen für eine Idee der Marker). Die Verbindungen werden mit eingegeben:

enteringLinks.append('polyline') 
    .attr({ 
     'stroke-width': 0, 
     style: 'marker-mid: url(#chevron);', 
     stroke: 'transparent', 
     path: function(d) {...}, 
     markers: function() {...}, 
     points: function() {...} 
    }); 

Die Sparren sind auch Setup programmatisch früher auf:

svg.append('marker') 
    .attr({ 
     id: 'chevron', 
     // ... 
    }) 
    .append('path') 
    .attr({...}); 

ich auf einem seltsamen Fehler in Firefox kam. Nach dem Aktualisieren der Abfrageparameter auf der Seite (unter Verwendung der Protokoll-API) fehlt allen neuen Verknüpfungen ihre Markierung. Es erscheint nach dem Ändern der URL, kann es nicht finden #chevron. Links, die bereits auf der Seite gerendert wurden, sind nicht betroffen.

Obwohl ich das nicht verstehen kann, weiß ich, wie man es für Firefox löst - document.location.href an die Marker-URL voranstellen, um url(document.location.href + #chevron) zu machen. Ich verstehe nicht wirklich, warum das funktioniert - warum funktioniert es beim ersten Laden, aber nicht nach einer Änderung? Problematisch ist jedoch, dass dies alle Marker in IE9 durchbricht.

Abgesehen von UA ​​Sniffing, würde ich gerne Ratschläge, wie ich dieses Problem in Firefox lösen könnte, ohne andere Browser zu beeinträchtigen.

Übrigens habe ich ursprünglich versucht, marker-mid in einem externen Stylesheet zu spezifizieren, aber die Verwendung dieser Marker würde in Firefox überhaupt nicht erscheinen - das gleiche oder ein ähnliches Problem, denke ich. Meine Browser-Support-Anforderungen sind alle gängigen Browser neueste Versionen und IE9 +.

Answer 1

Es scheint eine Inkonsistenz zwischen den Spezifikationen svg, css und html5 zu geben, wie der URI des Dokuments gehandhabt werden kann, der sich über pushState und Ressourcen von Fragmentbezeichnern ändert, was wiederum dazu führt, dass Browser Dinge anders implementieren.

• mozilla bug 652991
• old whatwg discussion
• newer CSSWG discussion

Eine vorgeschlagene Abhilfe scheint document.base nach pushstate gesetzt zu sein.