angularjs – Android White Background when keyboard fades away-ThrowExceptions

Exception or error:

Video of the problem from a different user but its the same

I have a background image set as follows :

  .pane {
  background-image:  url("../img/inner-banner-bg.jpg");
  background-repeat: repeat;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;

And in my config.xml

<preference name="Fullscreen" value="false"/>

Now the problem I am having is when the keyboard fades away after I hit done / search, it leaves a white background for like 0.5 during the transition for the space the keyboard covered and it looks a bit bad.

When the keyboard closes it unshrinks but leaves white gap. How can I get the keyboard to not shrink the view behind the backdrop ?

When I set

<preference name="Fullscreen" value="true"/>

It doesn’t happen. I am also using the Ionic Plugin Keyboard.

Anyway I can make the transition of the keyboard fading not display the white background ?

Edit : Here’s my android settings

<activity android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale" android:label="@string/activity_name" android:launchMode="singleTop" android:name="MainActivity" android:theme="@android:style/Theme.DeviceDefault.NoActionBar" android:windowSoftInputMode="adjustResize">
            <intent-filter android:label="@string/launcher_name">
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />

And my config Settings

  <access launch-external="yes" origin="geo:*"/>
  <allow-intent href="geo:*"/>
  <preference name="webviewbounce" value="false"/>
  <preference name="UIWebViewBounce" value="false"/>
  <preference name="DisallowOverscroll" value="true"/>
  <preference name="android-minSdkVersion" value="16"/>
  <preference name="BackupWebStorage" value="none"/>
  <preference name="SplashScreen" value="screen"/>
  <preference name="SplashScreenDelay" value="4000"/>
  <preference name="FadeSplashScreen" value="false"/>
  <preference name="ShowSplashScreenSpinner" value="true"/>
  <preference name="KeyboardShrinksView" value="false"/>

And in the Package.json

  "dependencies": {
    "gulp": "^3.5.6",
    "gulp-sass": "^2.0.4",
    "gulp-concat": "^2.2.0",
    "gulp-minify-css": "^0.3.0",
    "gulp-rename": "^1.2.0"
  "devDependencies": {
    "bower": "^1.3.3",
    "gulp-util": "^2.2.14",
    "shelljs": "^0.3.0"
  "cordovaPlugins": [
  "cordovaPlatforms": [

In my web view I use ion-view and ion-content

    <ion-content class="has-header has-tabs">
How to solve:

In AndroidManifest.xml file try to set windowSoftInputMode attribute to adjustNothing:


It worked for my Ionic project, avoiding the resize of Cordova webview when soft keyboard is on.


That is your windowBackground peeking through. You are probably drawing over the white background of your Theme with that teal background. Modify your theme to include a better background color and remove the background from your layout if possible to improve drawing performance.

<style name="MyAppTheme" parent="Theme.DeviceDefault.NoActionBar">
  <item name="android:windowBackground">#ff000000</item>



<style name="AppTheme" parent="AppBaseTheme">
     <item name="android:windowBackground">@drawable/gradient</item>

In styles.xml


Hey there is a simple workaround for this

you need to add overflow-scroll=”false” to your ion-content this should fix it

<ion-content class="padding has-header has-footer" overflow-scroll="false">

related topic Ionicforum


Its happen because window re size itself to make room for the soft input area

use android:windowSoftInputMode="adjustNothing" in AndroidManifest.xml

<activity android:windowSoftInputMode="adjustNothing"


Open your platform -> app ->src ->AndroidManifest.xml






Add the following code in your ‘App.js’. add

$window.addEventListener('native.keyboardhide', function (event) {
    $rootScope.$broadcast('native.keyboardhide', event);

when method call with $window and $rootScope dependency. also, add

    if (window.cordova && window.cordova.plugins && window.cordova.plugins.Keyboard) {

in $ionicPlatform.ready().

please ensure that your code is updated by inspecting your app. If it’s not updated then try to remove and add platform and rebuild your app.

Leave a Reply

Your email address will not be published. Required fields are marked *