Setup issue: SVG sprite buttons not display in Firefox

Expected behaviour

Like in Edge:

Actual behaviour

Environment

• Browser: Firefox
• Version: 60.0b16 (64 bit)
• Operating System: MS Windows 10 x64
• Version: 1709 (16299.371)

Steps to reproduce

File is builded using Python with module yattag scripts: jQuery, Bootstrap, and plyr

File structure:

│  
├── html
|   ├── vtt
|   ├── jpg
|   ├── mp4
│   └── html
└── media
    ├── js
    |   ├── bootrap.js
    |   ├── jquery.js
    |   ├── font-awesome,js
    |   └── data.js (here is script intilalizing plyr)
    ├── css
    |   ├── bootrap.css 
    |   ├── my css
    |   ├── font-awesome,js
    |   └── data.js (here is script intilalizing plyr)
    ├── img
    |   └── jpg's
    ├── blank.mp4
    ├── plyr.min.js
    ├── plyr.css
    ├── plyr.css.map
    └── plyr.svg

<video controls crossorigin playsinline id=player poster="local path to poster">
    <source src="local path to file" type="video/mp4" />
    <track kind="captions" label="English" srclang="en" src="local path to vtt file" default="" \>
</video>

<script src="../media/plyr.min.js"></script>

document.addEventListener('DOMContentLoaded', () => { 
  const player = new Plyr('#player', {
    iconUrl: '../media/plyr.svg'
  });
});

[sampotts]

I think I’ve found the issue. It’s meant to work like this:

• Check local storage has a sprite and it if does load from there
• Make the XHR request
• Update local storage for next page view as well as update sprite in DOM

The problem is if the sprite already exists, it doesn’t inject again as there’s a check to see if it exists and return. I’ll get this one fixed today.

[friday]

This should be fixed by now. If not, let us know.