CSS border-image breaks in firefox using bootstrap

Question

I have a navbar with a border-image using .svg as the background. In Chrome and Safari it works great but in Firefox it falls to bits.

I have added in the browser prefixes as I thought this was the issue

.navbar-nav {
-moz-border-image: url('http://imgh.us/brush-stroke.svg') 5 28 27 26 fill stretch;
-webkit-border-image: url('http://imgh.us/brush-stroke.svg') 5 28 27 26 fill stretch;
-o-border-image: url('http://imgh.us/brush-stroke.svg') 5 28 27 26 fill stretch;
border-image: url('http://imgh.us/brush-stroke.svg') 5 28 27 26 fill stretch;
}

this is attached to the ul class navbar

<ul class="nav navbar-nav navbar-right">

Looking up it shows firefox is supporting the border-image spec. I am also using bootstrap, but the only thing I can see extra is the box-sizing class.

Here is a fiddle of the navbar itself.

http://jsfiddle.net/serversides/dtpo3afL/

I have used border image on divs elsewhere on the site and works just fine, not sure where I am going wrong.

Answer 1

According to CanIUse.com, this is a bug in Firefox when dealing with SVG images in used as a border-image

When using an SVG image as the url of a border-image, it doesn't scale to the size of the element it's being used on.

Pending resolution, I would suggest an alternative image type as a fallback.

CanIuse Reference

Bugzilla Report