Why doesn't the stretch option work when applying a css image border using an svg?
I've added an svg image border to several inputs on a project using css and I can get it to render properly in every browser I've tried except firefox (first screenshot). I've applied the stretch effect to both the horizontal and vertical slices however it appears to be repeating in the center instead of stretching.
The documentation seems to indicate that it's supported so after an hour of searching I thought it might be a bug in the browser (I hope I'm wrong). I'm running firefox version 48.0 on windows 10 and I've ended up with the following code:
button{
border-image-slice: 80;
border-image-width: 10px;
border-image-outset: 5px;
border-image-repeat: stretch stretch;
border-image-source: url("http://php-webdev-with-mysql-tompk7.c9users.io/WebRPG/images/border03.svg");
border-style: solid;
}
I thought it might be interference by other css i had written so i tested it using a code generation site but the outcome was the same (second screenshot).
Thanks for your time.
All Replies (6)
It looks fine with FF48 on my Win 7.
I've temporarily patched it by adding a png converted from the svg and a Firefox only css rule that changes the image, but its looking like id have to do that for every svg i use.
Thanks though.
I still would like to get the svg working lol.
Could you provide a testcase on https://jsfiddle.net/ or http://codepen.io/
Sure, here it is https://jsfiddle.net/hawkpk7/dr1brw40/
It's fixed in 49+ by bug 619500.
ah ok, Thanks for looking into it.