madebysource / lesshat

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

.background-image(radial-gradient...) not working correctly, when using percentage #94

Closed wiesys closed 10 years ago

wiesys commented 10 years ago

Hi!

Today I noticed that I can't use percentage in radial gradient.

If I write:

.background-image(radial-gradient(ellipse at center, @gradientTo 0%, @gradientFrom 100%));

Everithyng's fine:

background-image: url(data:image/svg+xml;...);
background-image: -webkit-radial-gradient(center, ellipse, #2a90bd 0, #286aa5 100%);
background-image: -moz-radial-gradient(center, ellipse, #2a90bd 0, #286aa5 100%);
background-image: -o-radial-gradient(center, ellipse, #2a90bd 0, #286aa5 100%);
background-image: radial-gradient(ellipse at center, #2a90bd 0, #286aa5 100%);

But if I write:

.background-image(radial-gradient(ellipse at 50% 36%, @gradientTo 0%, @gradientFrom 100%));

It generates incorrect css and wothout SVG version:

background-image: -webkit-radial-gradient(50, ellipse% 36%, #2a90bd 0, #286aa5 100%);
background-image: -moz-radial-gradient(50, ellipse% 36%, #2a90bd 0, #286aa5 100%);
background-image: -o-radial-gradient(50, ellipse% 36%, #2a90bd 0, #286aa5 100%);
background-image: radial-gradient(ellipse at 50% 36%, #2a90bd 0, #286aa5 100%);

Almost the same happens for:

.background-image(radial-gradient(ellipse 50% 50% at 50% 36%, @gradientTo 0%, @gradientFrom 100%));
.background-image(radial-gradient(50% 50% at 50% 36%, @gradientTo 0%, @gradientFrom 100%));

And both of them are technically correct according to MDN.

I also noticed that .gradient() mixin in LESS Hat 1.1.2 which I was using for website I did last summer, worked fine with percentage too:

.gradient(radial-gradient(ellipse at 50% 50%, @gradientTo 0%, @gradientFrom 100%));
background-image: -moz-radial-gradient(50% 50%, ellipse, #fcca36 0%, #ed9429 100%);
background-image: -webkit-radial-gradient(50% 50%, ellipse, #fcca36 0%, #ed9429 100%);
background-image: -o-radial-gradient(50% 50%, ellipse, #fcca36 0%, #ed9429 100%);
background-image: radial-gradient(ellipse at 50% 50%, #fcca36 0%, #ed9429 100%);

Thanks! :)

petrbrzek commented 10 years ago

Fixed in 3.0.