Closed wiesys closed 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! :)
Fixed in 3.0.
Hi!
Today I noticed that I can't use percentage in radial gradient.
If I write:
Everithyng's fine:
But if I write:
It generates incorrect css and wothout SVG version:
Almost the same happens for:
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:
Thanks! :)