SVG disappears in firefox on URL change (jquery.history.js)

Question

In www.xc-tournament.com/tournament/10 you can see a paddle-tennis league. The hexagons near participants names are svg with a filled background (there will be the app users profile image).

When the user click on any of left column options: Clasificación (classification), Primera Jornada (first round) or Información (information), or when the user clicks on Siguiente (next) or Anterior (previous), the operational sequence is:

• window.History.pushState(...) with the new url
• if the content must be loaded from server (not the case)
  • make an AJAX call to load it
• else
  • hide the main component (via jQuery)
  • show the selected one

The problem is that on this operation and only in Firefox (different versions and OS) the svg hexagons disappear in some places as the left column or the classification table. The DOM objects are not altered nor I find any clue about why aren't they shown.

As I said, no new content is loaded just hidden or showed with jQuery and the url is changed to mantain navigation.

¿Is this a bug in Firefox? ¿Is there any way to avoid it?

Answer 1

You may have xml:base set. pushState affects this and means that your URL changes. To work around this use absolute rather than relative URLs in your fill attributes.

Firefox is working correctly per the various specifications but that isn't terribly useful and we think the specifications should change.