Линейный градиент CSS3 не работает на Android.

Новый вопрос здесь, но по какой-то причине я не могу понять это. У меня есть следующий CSS, который отлично работает на моем iPhone, но не на моем Android. От взгляда на демонстрации jQuery Mobile с андроидом я знаю, что он может обрабатывать фоновые градиенты. Спасибо

.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;
}

Ответ 1

Android-браузер ниже 4.0, в соответствии с caniuse использует старый синтаксис -webkit:

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

Бонус: я рекомендую использовать что-то вроде LESS или Compass/SASS, это спасет вас от всей этой работы http://compass-style.org/

Ответ 2

Я столкнулся с этим вопросом, потому что у меня были проблемы с линейными градиентами на Android 2.2. Проблема заключалась в том, что наш линейный градиент использовал новую систему углов

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

однако, старые Android поддерживают систему старого угла (без). Эквивалентом вышеупомянутого градиента будет

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

Ответ 3

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

Это работает.