View redrawn in the wrong position after closing the keyboard - Cordova/PhoneGap - Android

Question

I have a Cordova application (using the angularjs framework), here is my view:

When I focus an input that that requires the view to move up to keep the input visible when the (onscreen) keyboard is showing like so:

When I change the focus from the input to elsewhere (blur), the keyboard closes (like it should) but redraws the view in the wrong position:

When I inspect with Chrome, it shows all the elements in the position they should be and not where they are on the display:

I have absolutely no idea what is causing this bug, I have tried redrawing the view in the onDraw method, thus infinitely redrawing the view to see if that would fix it but to no avail. Any ideas?

Extra details
Cordova version: 3.5.0-0.2.4
Device: Nexus 10 - Android 4.4.4

Answer 1

I have found a fix/hack, not a great one however it's better than nothing.

By hiding the html tag and then re-displaying it redraws the view correctly.

 fixAndroidKitkatDisplayBug: function () {
        $(document).on('blur', 'input', function () {
            var htmlTags = document.getElementsByTagName('html');
            var html = htmlTags[0];
            html.style.display = 'none';
            html.offsetHeight; // no need to store this anywhere, the reference is enough
            html.style.display = 'block';
        });
    }

Then in the index.js, after the "onDeviceReady" I call this method like so

setTimeout(function (){
    if (typeof(device) != 'undefined' && device.platform && device.platform == "Android" && device.version && parseFloat(device.version) == 4.4) {
       fixAndroidKitkatDisplayBug();
    }
}, 100);

(For me I needed the setTimeout in order for device to be defined)