CODEWITHSUNDEEP
androidioscssintel-xdkhtml5-apps
Iman Sedighi
Iman Sedighi

Reputation: 8162

CSS Gradient Compatibility issue in XDK HTML5 App

I have a CSS code for using gradient in my HTML5 app in XDK. However When I debug my CSS codes with XLint, It says linear-gradient is not compatible with apps in: Android (2.3,4.0,4.1,4.2,4.3) IOS 6.0 

background:linear-gradient(rgb( 59, 89, 152), rgb(109, 132, 180)) repeat scroll 0% 0% rgb(238, 238, 238);

How I can use CSS gradient which can be compatible with all versions of Android and IOS?

Upvotes: 0

Views: 310

Answers (1)

OldGeeksGuide
OldGeeksGuide

Reputation: 2918

According to what I understand from caniuse you should be able to use linear-gradient on IOS 6 and Android 4.* with one caveat, you need to prepend it with -webkit-, i.e. you'll want your css file to contain two lines for the background, instead of just the one:

background: -webkit-linear-gradient(rgb( 59, 89, 152), rgb(109, 132, 180)) repeat scroll 0% 0% rgb(238, 238, 238);
background: linear-gradient(rgb( 59, 89, 152), rgb(109, 132, 180)) repeat scroll 0% 0% rgb(238, 238, 238);

Android 2.3 shows 'partial' support, so it might work or it might have issues. My guess is it has a good likelihood as it's straightforward linear gradient.

Also, at some point in the past, the standard for gradient was in flux and there were some different approaches, but again linear-gradient is pretty stable, so just prepending it with -webkit- will hopefully do the trick.

I haven't tried this on android or IOS myself, but from what I read it should work.

Upvotes: 1

Related Questions