CSS3 drop shadows look awful (way too dark) in Android phone

I can’t test my stuff much on Android devices, but recently looked at a page I’m working on in a friend’s Android phone, the drop shadows I have for the buttons look awful, they simply look much much darker… and I don’t know if it happens in all Android phone models, or in tablets (have yet to see my stuff on an Android tablet…) is there a way to deal with this in CSS? (the media queries are for detecting screen dimensions, but what about devices?) if not I guess you can do with JS? detect the device/browser with navigator.userAgent property, and change they style for certain devices in JS, yes?? (but if it’s not in all Android models then what? oh brother… Android is turning out to be a pain…:wink:

thank you…

All mobile devices are a pain. You obviously haven’t tried BlackBerry and Windows Phone devices. Even the best mobile OS in the world (iOS) has annoying problems.

I wouldn’t rely on JS for anything on a mobile. JS on mobiles can really slow things down (even basic scripts on older devices).

and

http://www.perfectomobile.com/portal/cms

…may help.

However, testing on simulators is never anywhere near as good as the real thing.

You might also went to check for CSS3 support on each device: http://caniuse.com

Trust me, there are loads of people out there who would be shocked if they actually tested their sites on real mobile devices.

thank you for your response…

but drop shadows are not JavaScript, they’re done with CSS…

or am I missing something??

(not test their stuff on mobile devices? yikes… :wink:

Drop Shadows = You might also went to check for CSS3 support on each device: http://caniuse.com