SVG not rendering properly in Firefox

Question

I have a problem with SVG renderring in Firefox. Whilst it works in Safari, Chrome or even in IE, it doesn't work in Firefox. Inspecting the element it seems that the layers are there, but only background is visible as if it's z-index is higher than the z-index of the others.

Rendered in Firefox: SVG logo in Firefox

Link to the original source file: SVG File

Thanks for your help.

PS: I used Sketch 3 to export the svg. If it helps somehow.

Answer 1

You're experiencing bug 995813.

I fixed this bug some time ago but that change is still making its way through the release process so your example will display correctly from Firefox 31 onwards which will be released on 22 July 2014.

In the meantime if you move the fill="white" from the <mask> element to the child <use> element this will work around the Firefox bug.