CSS не работает на устройстве

Question

Я не понимая, почему это CSS не работает на устройстве (Android 4.4 и IOS 8.0):

body { 
    background: -webkit-linear-gradient(45deg, $gcolor1, $gcolor2, $gcolor3, $gcolor4); /* For Safari 5.1 to 6.0 */ 
    background: -o-linear-gradient(45deg, $gcolor1, $gcolor2, $gcolor3, $gcolor4); /* For Opera 11.1 to 12.0 */ 
    background: -moz-linear-gradient(45deg, $gcolor1, $gcolor2, $gcolor3, $gcolor4); /* For Firefox 3.6 to 15 */ 
    background: linear-gradient(45deg, $gcolor1, $gcolor2, $gcolor3, $gcolor4); /* Standard syntax */ 
    background-attachment:fixed; 
    background-position: center; 
} 

body .view-container.tab-content { 
    background-color: transparent; 
} 

body .pane, .menu, .view, .list, .item  { 
    background: transparent; 
} 

Фоновый только белеет, несмотря на то что он работает в браузере (на телефоне и в Chrome). Что происходит?

FYI, я развертываю приложение с помощью Phonegap Build, и я применяю этот CSS к проекту с ионным/угловым.

Answer 1

Это может отсутствовать в этом:

background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,$gcolor1), color-stop(33%,$gcolor2), color-stop(66%,$gcolor3), color-stop(100%,$gcolor4)); 

Это должно быть специфическими для Safari 4+ и Chromes

Answer 2

попробовать этот

в Index.html добавить

<link href="css/ionic.min.css" rel="stylesheet"> 
     <link rel="stylesheet" type="text/css" href="css/index.css" /> 

затем скопируйте свой файл css внутри папки CSS

добавить это в index.html

<script> 
if (navigator.userAgent === undefined) { 
        navigator.__defineGetter__('userAgent', function() { 
               return("Mozilla/5.0 (iPhone; CPU iPhone OS 8_0 like Mac OS X) AppleWebKit"); 
        }); 
       } 

</script>