I am using phonegap to mobile application
this simple code was used to give the background an effect
it works fine in the browser and on android 5
but when i tested it on a 4.0.3 device, it didnt works at all along with some other css codes.
why is this happening and how to solve it ?
Best How To :
Properties in CSS are sometimes not universally supported on all devices or browsers at certain periods in time.
Vendor prefixes are used when software versions are shipped with proactive support, before the property had reached the approved specification.
You need to check if your target platform has support.
You can see Android 4.1 uses the
-webkit- prefix. You can try this for Android 4.0.3, it may very well work.
See also: https://developer.mozilla.org/en-US/docs/Web/CSS/radial-gradient#Browser_compatibility
Example of how to use vendor prefixes.
Gradients are a little special in nature, the prefix is on a function of sorts, inside the value of the property.
background-image: -webkit-radial-gradient(#222, #333);
background-image: radial-gradient(#222, #333);
Most vendor prefixes look like like:
-webkit-animation: 1s anim;
-moz-animation: 1s anim;
animation: 1s anim;