Non-cross-browser gradients

[AntonNarkevich]

Hello guys! Appreciate your work. Less hat is awesome.

But it seems background-image mixin isn't cross-brower. Today I got some issues at Android 2.3 native browser. A gradient wasn't applied because there is no -webkit-gradient in the mixin. Nonetheless it is necessary.

Here is a gradient from less hat: background-image: url(data:image etc); background-image: -webkit-linear-gradient(top, #fb83fa 0%, #e93cec 100%); background-image: -moz-linear-gradient(top, #fb83fa 0%, #e93cec 100%); background-image: -o-linear-gradient(top, #fb83fa 0%, #e93cec 100%); background-image: linear-gradient(to bottom, #fb83fa 0%, #e93cec 100%);

Here is the gradient from http://www.colorzilla.com/gradient-editor/ it works perfectly.

background: #1e5799; /* Old browsers / background: -moz-linear-gradient(top, #1e5799 0%, #7db9e8 100%); / FF3.6+ / background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(100%,#7db9e8)); / Chrome,Safari4+ / background: -webkit-linear-gradient(top, #1e5799 0%,#7db9e8 100%); / Chrome10+,Safari5.1+ / background: -o-linear-gradient(top, #1e5799 0%,#7db9e8 100%); / Opera 11.10+ / background: -ms-linear-gradient(top, #1e5799 0%,#7db9e8 100%); / IE10+ / background: linear-gradient(to bottom, #1e5799 0%,#7db9e8 100%); / W3C / filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 ); / IE6-9 */

Regards

[petrbrzek]

Hello,

the old webkit gradient syntax is missing, because almost all webkit browsers support newer syntax, but I can quite easily add it and you can then optionally turn it on. I'm adding it to my task list.

[librajt]

Waiting for next release :)

[AntonNarkevich]

Cool! Thanks!

[EvHaus]

Without this addition CSSLint and LESSLint will complain on the "gradient" rule.

[vidoardes]

I appreciate this is an old issue, but in case anyone is still having this issue (as this project seems done now) I managed to fix it quite simply, as it was breaking gradients on mobile safari + chrome browsers, simply add the following lines to the background-image mixin:

@process_webkit_old: ~`(function(t){if(t=t||8121991,8121991==t)return t;var e={"to bottom":"top","to left":"right","to top":"bottom","to right":"left","ellipse at center":"center, ellipse cover","circle closest-side":"center center, circle contain","circle farthest-corner":"center center, circle cover","circle farthest-side":"center center, circle cover","ellipse closest-side":"center center, ellipse contain","ellipse farthest-corner":"center center, ellipse cover","ellipse farthest-side":"center center, ellipse cover"},r=/(radial-gradient\()([a-z- ]+)at\s+(\w+%?)\s*(\w*%?)/g,n=Object.keys(e);return n.some(function(n){return t.indexOf(n)>=0?(t=t.replace(new RegExp(n+"(?![ a-z0-9])","g"),e[n]),!0):(r.test(t)&&(t=t.replace(r,function(t,e,r,n,a){return e.trim()+n.trim()+" "+a.trim()+","+r.replace(/closest-side/g,"contain").replace(/farthest-corner/g,"cover").trim()})),void 0)}),t=t.replace(/(\d+)\s*deg/g,function(t,e){return 90-e+"deg"}).replace(/(linear|radial)-gradient/g,"-webkit-gradient")})((function(){var t="@{arguments}";return t=t.replace(/^\[|\]$/g,"")})())`;

background-image: @process_webkit;