d5lmba
Last Updated: February 25, 2016
·
4.267K
· ytilis

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 );

1 Response
Add your response

15664

You might open a ticket with modernizr and see what they have to say about it - if their detection kit yields a false positive it might be beneficial to many to get a fix for this.

over 1 year ago ·