The radius of the frame and the shadow of the window do not work in Android 2.3.6

Question

I launched the Phonegap application on three devices: Android 2.3.6, Android 3 and iOS7. The problem is that on Android 2.3.6, I see that the toggle button using the jquery-switchery plugin is square, not rounded, as it appears on other phones.

Things I did that didn't work:

• Use cross browser border radius (e.g. -web-kit, -moz, etc.)
• Added! important

Rounded switch code from jquery plugin plugin:

.switchery>small { background: #fff; border-radius: 100%; -webkit-border-radius: 100%; border-radius: 100%; -moz-border-radius: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.4); height: 30px; position: absolute; top: 0; width: 30px; 

}

I cannot use developer tools to debug css on a device.

Answer 1

According to your published code, it seems you missed the provider prefixes for the box-shadow property.

Android 2.1-3.2 (and iOS 3.2-4.3) needs the -webkit- prefix to make box-shadow work:

 -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.4); 

In addition, to create a circle using border-radius , you need to set the radius of the circle as half the window size (width or height).

Therefore, you should use the following:

 border-radius: 15px; 

For Android 2.1 and iOS 3.2 , the -webkit- prefix is -webkit- .

General information

 .switchery > small { background: #fff; -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.4); box-shadow: 0 1px 3px rgba(0,0,0,0.4); height: 30px; width: 30px; -webkit-border-radius: 15px; /* 30px / 2 */ border-radius: 15px; /* 30px / 2 */ position: absolute; top: 0; }