Disable Android Browser's Input Overlays

Browser overlay obscuring bottom of page

Try height: 100% instead of height: 100vh. You'll probably also need to assign 100% height to every container:

/* full height for every wrapping element and the app itself */
body,
html,
#app,
.app
{
  height: 100%;
}

.app {
  display: flex;
  flex-direction: column;
}

I've got both #app and .app there because your JSFiddle example has both.

Input has different style on focus

The Android-WebKit-Browser seems to add a special overlay box to the input type "password" on focus (I think to apply this special mobile masking where the last letter typed is still visible) which ignores all styling except the "-webkit-tap-highlight-color" property.

So you will be out of luck styling these input boxes. Btw. styling of input boxes doesn't work at all on devices with HTC Sense, have a look here:

Input-Elements in WebViews always have the same style if highlighted on HTC Devices

Oh, one exception: the stylings seem to work on samsung devices (at least on Galaxy S and I5800)

Stop keyboard overlay when interacting with TextField in a NativeScript application

After stumbling around a few other discussions and resources:

Keyboard in going over the page view
Android keyboard overlay
Keyboard overlapping textview

There were a few takeaways from these resources which I'll review below.

Template Flow

First off, you'll need to ensure your page layout mirrors something like below:

ScrollView
  > StackLayout
    > GridLayout
      > SomeElement
    > GridLayout
      > TextField

Android Soft Input Mode

This relates to the on-screen keyboard that displays when a text field in the UI receives focus. One trick to ensure the keyboard does not overlay your textfield is to ensure you have the property windowSoftInputMode set in your AndroidManifest.xml. You can either use adjustResize or adjustPan. I'm not entirely sure of the differences, but some users have reported either or both working so you might need to play around with which works for your case. You can read more about these two flags here.

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
  package="__PACKAGE__"
  android:versionCode="10000"
  android:versionName="1.0">

  ...

  <application
    ...
    android:windowSoftInputMode="stateHidden | adjustPan">

Update 2

I believe there is something getting reset within NativeScript which is causing the flag set by android:windowSoftInputMode to be reset when the application is suspended and resumed. To get around this, you'll need to make some adjustments in the controller of the view itself to watch for these events to happen in your app's lifecycle and then retroactively enable the flags again.

some-view.component.ts (TypeScript)

import { Component, OnInit } from '@angular/core';
import * as app from "application";
import {
  resumeEvent,
  suspendEvent,
  ApplicationEventData,
  on as applicationOn,
  run as applicationRun } from "tns-core-modules/application";

declare var android: any; // <- important! avoids namespace issues

@Component({
  moduleId: module.id,
  selector: 'some-view',
  templateUrl: './some-view.component.html',
  styleUrls: ['./some-view.component.css']
})
export class SomeViewComponent implements OnInit {

  constructor() {
    applicationOn(suspendEvent, (args: ApplicationEventData) => {
      // args.android is an android activity
      if (args.android) {
        console.log("SUSPEND Activity: " + args.android);
      }
    });

    applicationOn(resumeEvent, (args: ApplicationEventData) => {
      if (args.android) {
        console.log("RESUME Activity: " + args.android);
        let window = app.android.startActivity.getWindow();
        window.setSoftInputMode(
          android.view.WindowManager.LayoutParams.SOFT_INPUT_ADJUST_PAN
        );
        // This can be SOFT_INPUT_ADJUST_PAN
        // Or SOFT_INPUT_ADJUST_RESIZE
      }
    });
  }
}