CODEWITHSUNDEEP
androidcss
Evanss
Evanss

Reputation: 23593

CSS3 linear-gradient not working on android.

Newbie question here but for some reason I cant figure this out. I have the following CSS which works fine on my iPhone but not an my Android. From looking at the jQuery Mobile demos with the android I know it can handle background gradients. Thanks 

.mydiv {
  background:    -moz-linear-gradient(#FFFFFF, #F1F1F1) repeat scroll 0 0 #EEEEEE;
  background: -webkit-linear-gradient(#FFFFFF, #F1F1F1) repeat scroll 0 0 #EEEEEE;
  background: linear-gradient(#FFFFFF, #F1F1F1) repeat scroll 0 0 #EEEEEE;
}

Upvotes: 11

Views: 21753

Answers (3)

applesElmi
applesElmi

Reputation: 416

I came across this question because I was having issues with linear gradients on an Android 2.2. The issue was, our linear gradient was using the new angle system 

-webkit-linear-gradient(to top #000000 0%, #ffffff 100%)

however, older Android's support the old angle system (without to). The equivalent of the above gradient would be 

-webkit-linear-gradient(bottom #000000 0%, #ffffff 100%)

Upvotes: 3

Cmorales
Cmorales

Reputation: 1007

Android browser below 4.0, according to caniuse uses the old -webkit syntax: 

background-image:-webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #a7cfdf), color-stop(100%, #23538a));

Bonus: I recommend you use something like LESS or Compass/SASS, it would save you all this work http://compass-style.org/

Upvotes: 23

Will
Will

Reputation: 723

background-color:#666633; //fallback
background:-webkit-linear-gradient(top, #666633,    #333300);  //webkit
background:-moz-linear- gradient(top, #666633, #333300) //mozilla

This works.

Upvotes: 1

Related Questions