svg-gradient doesn't work properly in Firefox

[kaiyoma]

Here's the Less I'm using:

#text {
  background-image: svg-gradient(to right, #f6f7f8, #d0d1d5);
}

Which gets converted into this CSS:

$ ./node_modules/less/bin/lessc gradient.less
#text {
  background-image: url('data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20%3F%3E%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%201%201%22%20preserveAspectRatio%3D%22none%22%3E%3ClinearGradient%20id%3D%22gradient%22%20gradientUnits%3D%22userSpaceOnUse%22%20x1%3D%220%25%22%20y1%3D%220%25%22%20x2%3D%22100%25%22%20y2%3D%220%25%22%3E%3Cstop%20offset%3D%220%25%22%20stop-color%3D%22%23f6f7f8%22%2F%3E%3Cstop%20offset%3D%22100%25%22%20stop-color%3D%22%23d0d1d5%22%2F%3E%3C%2FlinearGradient%3E%3Crect%20x%3D%220%22%20y%3D%220%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22url(%23gradient)%22%20%2F%3E%3C%2Fsvg%3E');
}

I've put this CSS into a JSFiddle here: https://jsfiddle.net/kaiyoma/5q2mxeuL/

The gradient works correctly in Chrome, IE11, and Edge, but is very broken in Firefox. Is this a Less issue or a Firefox issue?

[kaiyoma]

Sorry, I should also mention I'm on 64-bit Windows 10. Here are the browser versions I'm using:

Chrome: 47.0.2526.111 m
IE: 11.63.10586.0
Edge: 25.10586.0.0
Firefox: 44.0

[seven-phases-max]

Anyone to confirm?

[rjgotten]

@seven-phases-max:
Anyone to confirm?

Confirmed.

If an SVG image defines an intrinsic ratio in any way, then Firefox will honor it when the SVG is used as a background image; even when the SVG in question is configured with preserveAspectRatio="none".

The only way to override that is to set an explicit background-size : 100%.

(See: https://developer.mozilla.org/en-US/docs/Web/CSS/Scaling_of_SVG_backgrounds)

The jsfiddle in question has a (decoded and pretty-printed) SVG source of:

<?xml version="1.0" ?>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
  width="100%" height="100%" viewBox="0 0 1 1" preserveAspectRatio="none"
>
  <linearGradient id="gradient" gradientUnits="userSpaceOnUse"
    x1="0%" y1="0%" x2="100%" y2="0%"
  >
    <stop offset="0%" stop-color="#f6f7f8"/>
    <stop offset="100%" stop-color="#d0d1d5"/>
  </linearGradient>
  <rect x="0" y="0" width="1" height="1" fill="url(#gradient)" />
</svg>

Its viewbox is setting up an intrinsic ratio, which is not what you'd want. It also contains quite a bit of unnecessary noise that can be stripped out to shrink the SVG down in size.

Here's what that SVG should be:

<svg xmlns="http://www.w3.org/2000/svg">
  <linearGradient id="g" x1="0%" y1="0%" x2="100%" y2="0%">
    <stop offset="0%" stop-color="#f6f7f8"/>
    <stop offset="100%" stop-color="#d0d1d5"/>
  </linearGradient>
  <rect width="100%" height="100%" fill="url(#g)" />
</svg>

And the resulting fiddle: https://jsfiddle.net/vb088x4b/

[seven-phases-max]

@rjgotten Thanks.

[koutsenko]

Workaround background-size: 100%; not work.
The only workaround worked for me is background-size: 100vw 100vh

[matthew-dean]

Saw this was still open. Should svg-gradient be deprecated and this be marked as "won't fix"?

[rjgotten]

svg-gradient may still serve a purpose for those users that need to support IE 9, which supports SVG backgrounds and SVG gradients, but doesn't support CSS gradients.

Still; that use-case could also be — and probably should be — resolved with a custom post-compile step, like auto-prefixer handling vendor prefixing.

[matthew-dean]

@rjgotten Oh I'm not suggesting we drop svg-gradient immediately, just deprecate it. And considering the low need, I think addressing this bug is pretty low priority.

[matthew-dean]

Also, AFAIK, xmlns is not really a requirement for any browser.

Never mind, seems it is!