Every time when i design web application for mobile devices, Android and its default browser makes me a mad. Why? Default Android webview is a one big bug in interpretation of HTML, CSS and Javascript. What Google patch in one version of Android, breaks in another. Nightmare.

Eg. Android 4.1 – 4.3 has a bug in default webview with interpretation of z-index rule when parent element has a

"overflow: hidden;

or

overflow: scroll;

directive. Android 4.4 completely ignore viewport meta tag and has a bugs in touch function of DOM elements. And this is a only two little examples. And as a cherry on cake, bug that still present in every Android version – a poor performance of canvases. Canvases are slow, very slow. Why? Not even i don’t understand. Maybe it’s Dalvik (default java virtual machine in Android), maybe something else, who knows? – Google engineers don’t knows that to, definitely. I hope future versions of Android will eliminate that performance troubles – maybe Dalvik will be cut for good? Dreams…

OK, but now something more useful than my complains about. Creative thinking is sometimes a good idea. What to do when you have a web application with max-width rules for resolution in css eg.

@media screen and (max-width:768px) {}

and body has

overflow: hidden;

directive and does not scroll horizontally, and you have element that you want to hide for different operating systems or browsers and show it only for selected systems? Natural and fast choice – few metatags in HTML head section, manipulate viewport, hide element by z-index and voila!

Works like a charm for iOS, Windows Phone, desktops browsers, but… Android 4.1 to 4.3 do not interpret z-index (OK – interpretation is done, but webview has a bug and do not show results of this interpretation 🙂 ) and Android 4.4 piss of your viewport. And now what? Eg. You want to show div element for Android 4.4 with 768 viewport but no for Android 4.1, 4.2 with 320 px viewport. Viewport metatag: no way, z-index: no way… Maybe throw out element of the screen with directive eg.

left:-1500px;

? But how to identify Android version? A little JavaScript will help:

var test = LowerThanAndroidVersion('4.4');
if (test) {
    document.getElementById('YOURID’).style.left = -1500 + 'px';
} else if (test == undefined) {
	document.getElementById('YOURID').style.left = -1500 + 'px';
} else {
    document.getElementById('YOURID').style.zIndex = 0;
}    

function LowerThanAndroidVersion(testversion) {
   var useragent = navigator.userAgent;
    var androidpoint = useragent.indexOf('Android');
    if (androidpoint >= 0) {
        var rest = useragent.substring(androidpoint + 8, useragent.length);
        var version = rest.substring(0, rest.indexOf(';'));
        return (version < testversion) ? true : false;
    }
}

Simple isn't?