search

madebysource / lesshat

Smart LESS CSS mixins library.
lesshat.com
MIT License
2.19k stars 258 forks source link

Multiple Linear Gradients & IE SVG version #124

Open richmilns opened 10 years ago

richmilns commented 10 years ago

I'm having a bit of trouble with the Linear Gradient Mixin, specifically when used with Multiple gradients. I'm using LESSHat 3, just downloaded a fresh copy today.

.background-image(
    linear-gradient(top, rgba(255,255,255,0) 0, #fff 100px),
    linear-gradient(top, rgba(255,255,255,0) 10px, rgba(255,255,255,0.5) 100px),
    linear-gradient(top, rgba(255,255,255,0) 10px, rgba(255,255,255,0.5) 100px)
);

I am using the above code, repeating the gradient to soften the overall effect. It works great in Firefox, Chrome etc.

Here is how I would expect it to look: expected

... and this is what I'm seeing in IE9+: ie

As a workaround, I used the following code as well as the LESSHat mixin:

background-image:
    -ms-linear-gradient(top, rgba(255,255,255,0) 0, #fff 100px),
    -ms-linear-gradient(top, rgba(255,255,255,0) 10px, rgba(255,255,255,0.5) 100px),
    -ms-linear-gradient(top, rgba(255,255,255,0) 10px, rgba(255,255,255,0.5) 100px);

Adding this prefixed code after the mixin seems to cure the problem in IE10+ and also crucially does not break other modern browsers either. IE9 doesn't understand those -ms-linear-gradient prefixes, but I can work around this using HTML conditional comments with replacement PNGs, as I would have had to for IE7/8 anyway.

Note that single gradients work just fine.

The questions is: is this a bug in LESSHat, or is it not possible for an SVG version to be created for multiple linear gradients?

For reference, here is my final (workaround) code:

.background-image(
    linear-gradient(top, rgba(255,255,255,0) 0, #fff 100px),
    linear-gradient(top, rgba(255,255,255,0) 10px, rgba(255,255,255,0.5) 100px),
    linear-gradient(top, rgba(255,255,255,0) 10px, rgba(255,255,255,0.5) 100px)
);
// IE 10+ needs special prefixes as the LESSHat gradient SVG workaround seems broken for multiple gradients
background-image:
    -ms-linear-gradient(top, rgba(255,255,255,0) 0, #fff 100px),
    -ms-linear-gradient(top, rgba(255,255,255,0) 10px, rgba(255,255,255,0.5) 100px),
    -ms-linear-gradient(top, rgba(255,255,255,0) 10px, rgba(255,255,255,0.5) 100px);