linear-gradients not working in mobile web browsers

This should work for every browser (even mobile ones) just tested it:

#element {
    background: -moz-linear-gradient(black, transparent); /* FF 3.6+ */  
    background: -ms-linear-gradient(black, transparent); /* IE10 */  
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #000000), color-stop(100%, #ffffff)); /* Safari 4+, Chrome 2+ */  
    background: -webkit-linear-gradient(black, transparent); /* Safari 5.1+, Chrome 10+ */  
    background: -o-linear-gradient(black, transparent); /* Opera 11.10 */  
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr=transparent); /* IE6 & IE7 */  
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr=transparent)"; /* IE8+ */  
    background: linear-gradient(black, transparent); /* the standard */  
    z-index: 1;
}

Check this two good web sites for css on browsers:

• Site 1

• Site 2

  (I tested it on iOS 5.1.1 with this demo http://jsfiddle.net/luissanchezm86/4Kwb4/)

Hope it helps!

In mobile safari at least, you can't use the keyword transparent, you have to use rgba(255,255,255,0) instead. Proof: https://developer.apple.com/library/archive/documentation/InternetWeb/Conceptual/SafariVisualEffectsProgGuide/Gradients/Gradient.html

Search for transparent, you will see even in their official document, they use rgba for transparent color.