When I use Firefox, I should see the sprites.

[ehgoodenough]

Details

We are, for all intents and purposes, supporting primarily Chrome, mostly because we'll be bundling our code via Electron, which is really just Chromium. However, it would be nice if it worked (more or less) on most (or at least a few) other browsers. Such as Firefox.

When opening our game in Firefox, all our sprites are just boxes.

Screenshot

### Implementation

We're using -webkit-mask, which is (obviously) unique to Webkit. We need to either add declarations for other vendor-specific masks, or figure out why mask isn't working in React.

[Willamin]

Css masks only work with a vendor prefix in webkit browsers (Chrome, Safari, etc.) and in Firefox only work with inline svg, instead of a link to an image. (http://caniuse.com/#feat=css-masks)

[ehgoodenough]

Yeah, I think you're totally right. So we need to update the React entity to include the vendor-specific styles, not just the vanilla styles.

[ehgoodenough]

Either that, or switch from CSS Masks to CSS Color Rotates, or do the stupid lazy thing and color the sprites by canvas.

[Willamin]

My vote it to switch to the stupid lazy thing until Mozilla realizes it's 2016 and that they need to properly implement CSS masks. It looks like Webkit has had them since 2008 (https://webkit.org/blog/181/css-masks/). ¯_(ツ)_/¯