Lies, lies, and Android's stock browser

While working on a responsive site that featured some CSS 3D Transforms, I found that, for some reason, clicking into a text input to type on Android 2.3 and below caused the automatic scroll to the input to exhibit a strange yoyo behavior. It would jump down about 300px too far, jump up a bit, jump down again, up one more time, and park itself a couple of hundred pixels south of the actual input location.

After a ton of messing around, I realized that it was related to another bug: the stock Android Browser's incomplete support for CSS 3D Transforms and transitions.

Despite Modernizr reporting that it's supported, Android 2.3 and below will in fact fail to properly perform a rotateY transform, instead performing a regular rotate. Additionally, the very presence of an element with 3D transition properties seems to cause the jumpy behavior on input focus.

Because feature detection yields a false positive, I had to actually detect the version of Android being run via the user agent string, and add a class to the body as needed, so I could target it separately and force the fallback animation I'd written to kick in on Gingerbread, FroYo, and below (to be safe, I also added Honeycomb, since I didn't have an Android 3 tablet to see if it worked on it).

var ua = navigator.userAgent.toLowerCase();
var isOldAndroid = /android [1-3]/i.test( ua );