IBM Worklight - Application displays and acts differently in different Android OS versions

Question

I am creating a Worklight-based Hybrid application with the Android environment.

I have two problems:

1. The keyboard in a smartphone and tablet; Once it vanishes there is some delay until it truely disappears - there is some white background...

   Full size image: http://www.tiikoni.com/tis/view/?id=fe716e8

2. The border of a text input field looks differently in each device even though the CSS is the same one.

   Full size image: http://www.tiikoni.com/tis/view/?id=a7333a7

Source code snippets:

• Login.html: http://www.pastebin.com/3h5i7179
• Login.css: http://www.pastebin.com/R5RajiXD

Answer 1

Regarding issue #1:

I ran my test application in:

• Google Nexus "5 (Android 4.4), Google Nexus "10 (Android 4.3)

  In these devices I could not recreate the "delayed white residue" (by showing the keyboard and then sliding it off)

• Samsung Galaxy Tab 1 "7 (Android 2.2), Android Emulator (2.x, 4.x)

  In these devices I managed to recreate it

IMO this issue seems to happen due to the device specifications. Yours may just be too slow... The users will need to endure the 1s or so until the white area gets repainted.

Regarding issue #2:

1. To disable the focus ring surrounding the input fields, add the following to the input CSS:
   

   /* Deals with Android 4.x */
   outline: none;
   
   /* Deals with Android 2.x */
   -webkit-tap-highlight-color: rgba(0,0,0,0);
   -webkit-tap-highlight-color: transparent; /* For some other Androids */
   

2. To display the same green-colored input fields in both Android OS 2.x and 4.x I have added the following to the input CSS:
   

   background-color: #00CD9A;

   Note: In Android 2.x the OS adds a layer on top of password type input fields and so these will lose their styling when focused: Input has different style on focus

The full CSS for input:

input {
    -webkit-border-radius:8px;     
    font-size: 30px;
    font-family: calibri, sans-serif;

    /* Idan: To remove the focus rings: */
    outline: none;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    -webkit-tap-highlight-color: transparent;

    /* Idan: Background color for the input fields: */
    background-color: #00CD9A; 
}