CSS gradient not working on Android 2.3.6?


I'm using this code for a div

background: url(../img/texturee.png), linear-gradient(left, #de2785 1%,#f954b1 50%,#de2785 100%);

and to add vendor prefixes I'm using this library http://leaverou.github.com/prefixfree/

It's working fine in Chrome, Firefox, Safari, iPhone, iPad but not in Android 2.3.6 default browser. Am i doing something wrong?



After @mdmullinax answer I changed it to

background: url(../img/texturee.png), -webkit-linear-gradient(left, #de2785 1%,#f954b1 50%,#de2785 100%);

but still not working.

Problem courtesy of: Jitendra Vyas


possible you'll need to use the outdated gradient syntax...-webkit-gradient

Surfin' Safari - Blog Archive » Introducing CSS Gradients - documentation on outdated syntax

Surfin' Safari - Blog Archive » CSS3 Gradients - see the paragraph on Changes from -webkit-gradient

caniuse.com briefly notes this

Note: Partial support in Safari/Chrome refers to requiring an outdated gradient syntax to work

but doesn't provide any additional details


perhaps try

/* bkgd w/outdated webkit gradient */
background: url(../img/texturee.png), 
            -webkit-gradient(linear, left top, left bottom, color-stop(1%,#de2785), color-stop(50%,#f954b1), color-stop(100%,#de2785));
/* bkgd w/standards gradient */
background: url(../img/texturee.png), 
            linear-gradient(left, #de2785 1%,#f954b1 50%,#de2785 100%);
Solution courtesy of: MikeM


There is currently no discussion for this recipe.

This recipe can be found in it's original form on Stack Over Flow.