Css3 Linear-Gradient Not Working on Android

CSS3 linear-gradient not working on android.

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/

Linear-Gradient not working on Android device (NativeScript 8)

You can overlay the image (or any component) with a gradient layer to achieve similar results on the both platforms.

Template

  <GridLayout rows="auto, auto, auto, auto, auto">
    <Image row="0" src="~/assets/images/registration.png"/>
    <ContentView row="0" height="100%" class="my-gradient"/>
    ... Other Components
  </GridLayout>

Style

  .my-gradient {
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1))
  }

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!

CSS gradient not working on Android 2.3.6?

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

EDIT:

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%);

---

Related Topics