bug: White Background overlays view on Keyboard show / hide on Android

[malifai]

Type: bug

Platform: android 5.x webview

Platform: Android (5.0, not tested on other devices)

Ionic: 1.0.1 (Vanadium...)

Prerequisites:

• < preference name="Fullscreen" value="true"/>
• ionic.Platform.isFullscreen = true;
• $ionicConfigProvider.scrolling.jsScrolling(false); ( i mention this because i added this in the new version, since there were so many problems in 1.0.0 regarding native scrolling and input focus issues with keyboard)
• (Crosswalk is used, version 13+)

2 Issues:

1. When focusing an input field, a white background appears behind the keyboard (sometimes it extends up to 20-30px above the keyboard, overlaying the view). Hiding the keyboard makes the background visible for about 200-300ms after the keyboard is hidden and before it fades away. (Timing issues?)
2. When focusing an input field, the keyboard shows, then focusing a select box hides the keyboard correctly, but the white background is still overlaying the bottom half of the view. Closing the select menu will NOT remove the white background. Only focusing an input again will correct the view (and we return to bug 1...)

An similar issue as an example can be seen here:
http://forum.ionicframework.com/t/white-background-shows-when-keyboard-closes-on-android/25258

Solution:
Removing the line "ionic.platform.isFullscreen = true" solves both issues for me.
There seems to be no impact for iOS (ionic.platform.isFullscreen = true; is still set for iOS)

[mhartington]

Do you have a background color in that view?

[malifai]

Well the pane has #fff per default i guess. thats it.some elements of course, but not white.

[mhartington]

Just tested this out on a nexus 5 running android 5.0, wasn't able to reproduce it. Is there any more information you could provide? Perhaps a video of it happening?

[DURK]

I have the exact same issue, with the combination of 'fullscreen' and 'native scrolling'. I can reproduce with or without Crosswalk on my Galaxy Tab 4 (Android 4.4.2).

Different versions of ionic-plugin-keyboard (1.0.0, 1.0.4 or 1.0.5) all had the same result.

I've recorded a video of it happening. @kryptikal could you confirm this is what you're seeing?
https://cloudup.com/cgQAOEjjvSI

[malifai]

Yes. Exactly the same.

[amazaud]

I got the same issue for the 20/30px extends above keyboard. Since my application background is not white but dark color, it looks like quite ugly. I "hide" this issue by setting my background color on the ion-view element instead of the ion-content. This is not really a workaround but just hides the problem. It also solves the problem that shows a white background during 200/300ms after the keyboard hides. Another user already opens an issue #3817 for that.

About the second issue, I used to had the same one as you, so I had a look a found two others issue which duplucate this one with two different workaround: #3927 and #4007. You could try one of them until the problem is solved in future Ionic release.

[mhartington]

@DURK would you be able to provide some markup for this particular view? Maybe even a minimal codepen for me to pull down and test on.

[Ionitron]

Greetings @kryptikal!

My sensors indicate a reply was requested, but as we have not received one yet, I am using my robot powers to close this issue. However, if you are still experiencing this issue, please feel free to reopen it by creating a new issue, and include any examples or necessary information.

Thank you for allowing me to assist you.

[Ionitron]

Greetings @kryptikal!

My sensors indicate a reply was requested, but as we have not received one yet, I am using my robot powers to close this issue. However, if you are still experiencing this issue, please feel free to reopen it by creating a new issue, and include any examples or necessary information.

Thank you for allowing me to assist you.

[mlynch]

Did #4007 fix this?

[VinceOPS]

Experiencing the exact same issue here.

[jgw96]

Hello all! Is this still an issue with ionic 1.3.0?

[phyr0s]

Yes

El miércoles, 27 de abril de 2016, Justin Willis notifications@github.com
escribió:

Hello all! Is this still an issue with ionic 1.3.0?

—
You are receiving this because you commented.
Reply to this email directly or view it on GitHub
#4057 (comment)

[jgw96]

Hello all, thanks for opening an issue with us! As i cannot seem to reproduce this on any of my Android devices (Nexus 6 running latest Android N dev preview, Nexus 7 2013 running Android 6.0.1 and a Moto X 2014 running Android 5.1.1) i will be closing this issue for now. If anybody could post a minimal example that i can use to reproduce this issue i will happily reopen. Thanks for using Ionic!

[VinceOPS]

Hi @jgw96, you can download the app "Happnd" which was presented on the ionic blog recently... There is one screen with a not-white background, and as far as I remember, I saw the issue on this one, opening and closing the keyboard.

[VinceOPS]

@jgw96 Actually, the issue also exists on ionic 2. Run a sample app on Android with a background picture (in the current view) and make the keyboard pops up. You'll see the "white" space under the keyboard until it completely disappears.

[YellowSharkMT]

I can trigger this issue pretty easily, using Ionic 1.3.1. I've forked the ionic-starterapp-sidemenu project to demonstrate that. The relevant edits are these 2 commits:

1. add an input field to demonstrate issue (commit)
2. add a call to ionic.Platform.fullScreen from, within $ionicPlatform.ready() (commit)

You can run the following commands to see this issue in action:

1. ionic start test_app https://github.com/YellowSharkMT/ionic-starter-sidemenu
2. ionic platform add android
3. ionic run android
4. tap in the input field, the issue should occur.
5. add'l info: something is setting the css height of the element to an incorrect value, this can be observed by using the chrome://inspec feature in Google chrome to debug the webview.

I had that code in place (referring to the call to ionic.Platform.fullScreen()) to address a quirk in our app that was affecting the size of our header, but that was on the 1.1.x branch, and I overlooked it as a possible source of an issue with our app after we upgraded to 1.3.x. I'm definitely open to the possibility that I'm "doing it wrong", as they say. Not sure how I settled on that code, TBH, was over a year ago. Anyhow, hope this is helpful to someone.

[rahul202]

I dont know why this issue has been closed ....Bumbing this thread.. if anyone of u want, i can give u a demo video.

Ionic.version:1.3.1

[veljkocasa]

Still same.
+1
Cordova CLI: 5.4.1
Gulp version: CLI version 3.9.1
Gulp local: Local version 3.9.1
Ionic Framework Version: 1.3.2
Ionic CLI Version: 1.7.16
Ionic App Lib Version: 0.7.3
Node Version: v4.4.5

[benzclk]

Same problem. Anyone can fixed this?

-Ionic 1.3.2

[pyavcom]

2.1.7 same ..

[freddiescott]

I'm also getting the same problem on 1.3.2
The change mentioned here did correct my problem : #4849 (comment)

[talesporto]

@freddiescott

I have the same problem!!! This solution dont resolve. If the screen has many fields the keyboard overwrite the selected field.

I'm using ionic 1.3.1 (My bower is attached).

I dont know how to solve it.
Can anyone help us with it?

[pyavcom]

keyboard appear with white block at top, which hash height about 80% of keyboard height, it overlaps all elements at page, but if input element gets focus and it appear under white block, coursor appear at correct position and blinks, but without text of input element or labels.
ionic keyboard plugin installed, all latest versions as for 13feb17

[UnderTheMoonspell]

This issue still happens in Ionic 2 in iOS.
I have a tab application and before the white space appears, the tabs move to the top of the keyboard. I posted what happens in the ionic foruns:

I drew in red all the things that happen after you close the keyboard(K):

1- The tabs (T) that were previously behind the keyboard and with bottom: 0 are now placed on top of the keyboard.
2- The keyboard disappears and leaves a huge white "div" in its place.
3- The white div follows the keyboard and the tabs finally return to their original position.

Other things I found interesting:

• It works in Android because I had set the following in the manifest: android:windowSoftInputMode="adjustPan".
• If I manually call "this.keyboard.close()" the problem does not occur (to be honest it still happens but is very very rare). So basically the default action of the plugin "close the keyboard when clicking outside the input" is not working as it should.

[dcardonacoxti]

I solved the problem with this, in the platform/android folder open the manifest.xml and in the main activity tag replace the android:windowSoftInputMode="adjustResize" attribute with android:windowSoftInputMode="adjustPan"

[niyando]

I had this issue with native scrolling and found that it was limiting the height of the ion-content whenever the keyboard was up. This caused my view to appear truncated (half blank) unless you close the keyboard. I solved it by force setting the height to auto. Hope this helps.

.keyboard-up{
  height: auto !important;
}

[parkbroom]

@niyando do you mind providing me your full html markup? I can't seem to apply this to my ionic app

[km4]

I fix this problem, my solution. Add on the page content
.scroll-content { -webkit-overflow-scrolling: auto; }
but you stop scrolling immediately block smooth scroll 🗡

[gbrits]

The following worked for me:

.scroll-content {
    padding-bottom: 0px !important;
}

[ignacioPastor]

Hi, I have a similar problem, the current page was being pushed by the keyboard, and when it disappears the page behind was visible just a moment in the space where the keyboard was.
@dcardonacoxti solution worked for me, but I think that this is just a workaround.
Any idea about how to fix this in a proper way?

• ionic 3.9.2

[AdityaDaflapurkar]

@ignacioPastor , the properties in AndroidManifest.xml file can be overwritten from config.xml at build time using this plugin: https://www.npmjs.com/package/cordova-plugin-settings-hook. I added these two lines in config.xml and it worked for me.

<plugin name="cordova-plugin-settings-hook" spec="~0" />
<preference name="android-windowSoftInputMode" value="adjustPan" />

[msd117]

this Temp fix solve the issue for me

.keyboard-open .has-footer{
    bottom: 0px !important;
}

[zhangtingwz]

@AdityaDaflapurkar ，hello，friend ,have a similar problem like@ignacioPastor, i use your way ,but ,i still have this problem ,this is my config.xml
<?xml version='1.0' encoding='utf-8'?> <widget id="io.ionic.starter" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0"> <name>myApp</name> <description>An awesome Ionic/Cordova app.</description> <author email="hi@ionicframework" href="http://ionicframework.com/">Ionic Framework Team</author> <content src="index.html" /> <access origin="*" /> <allow-intent href="http://*/*" /> <allow-intent href="https://*/*" /> <allow-intent href="tel:*" /> <allow-intent href="sms:*" /> <allow-intent href="mailto:*" /> <allow-intent href="geo:*" /> <preference name="ScrollEnabled" value="false" /> <preference name="android-minSdkVersion" value="19" /> <preference name="BackupWebStorage" value="none" /> <preference name="SplashMaintainAspectRatio" value="true" /> <preference name="FadeSplashScreenDuration" value="300" /> <preference name="SplashShowOnlyFirstTime" value="false" /> <preference name="SplashScreen" value="screen" /> <preference name="SplashScreenDelay" value="3000" /> <preference name="android-windowSoftInputMode" value="adjustPan" /> <platform name="android"> <allow-intent href="market:*" /> <icon density="ldpi" src="resources/android/icon/drawable-ldpi-icon.png" /> <icon density="mdpi" src="resources/android/icon/drawable-mdpi-icon.png" /> <icon density="hdpi" src="resources/android/icon/drawable-hdpi-icon.png" /> <icon density="xhdpi" src="resources/android/icon/drawable-xhdpi-icon.png" /> <icon density="xxhdpi" src="resources/android/icon/drawable-xxhdpi-icon.png" /> <icon density="xxxhdpi" src="resources/android/icon/drawable-xxxhdpi-icon.png" /> <splash density="land-ldpi" src="resources/android/splash/drawable-land-ldpi-screen.png" /> <splash density="land-mdpi" src="resources/android/splash/drawable-land-mdpi-screen.png" /> <splash density="land-hdpi" src="resources/android/splash/drawable-land-hdpi-screen.png" /> <splash density="land-xhdpi" src="resources/android/splash/drawable-land-xhdpi-screen.png" /> <splash density="land-xxhdpi" src="resources/android/splash/drawable-land-xxhdpi-screen.png" /> <splash density="land-xxxhdpi" src="resources/android/splash/drawable-land-xxxhdpi-screen.png" /> <splash density="port-ldpi" src="resources/android/splash/drawable-port-ldpi-screen.png" /> <splash density="port-mdpi" src="resources/android/splash/drawable-port-mdpi-screen.png" /> <splash density="port-hdpi" src="resources/android/splash/drawable-port-hdpi-screen.png" /> <splash density="port-xhdpi" src="resources/android/splash/drawable-port-xhdpi-screen.png" /> <splash density="port-xxhdpi" src="resources/android/splash/drawable-port-xxhdpi-screen.png" /> <splash density="port-xxxhdpi" src="resources/android/splash/drawable-port-xxxhdpi-screen.png" /> </platform> <platform name="ios"> <allow-intent href="itms:*" /> <allow-intent href="itms-apps:*" /> <icon height="57" src="resources/ios/icon/icon.png" width="57" /> <icon height="114" src="resources/ios/icon/icon@2x.png" width="114" /> <icon height="40" src="resources/ios/icon/icon-40.png" width="40" /> <icon height="80" src="resources/ios/icon/icon-40@2x.png" width="80" /> <icon height="120" src="resources/ios/icon/icon-40@3x.png" width="120" /> <icon height="50" src="resources/ios/icon/icon-50.png" width="50" /> <icon height="100" src="resources/ios/icon/icon-50@2x.png" width="100" /> <icon height="60" src="resources/ios/icon/icon-60.png" width="60" /> <icon height="120" src="resources/ios/icon/icon-60@2x.png" width="120" /> <icon height="180" src="resources/ios/icon/icon-60@3x.png" width="180" /> <icon height="72" src="resources/ios/icon/icon-72.png" width="72" /> <icon height="144" src="resources/ios/icon/icon-72@2x.png" width="144" /> <icon height="76" src="resources/ios/icon/icon-76.png" width="76" /> <icon height="152" src="resources/ios/icon/icon-76@2x.png" width="152" /> <icon height="167" src="resources/ios/icon/icon-83.5@2x.png" width="167" /> <icon height="29" src="resources/ios/icon/icon-small.png" width="29" /> <icon height="58" src="resources/ios/icon/icon-small@2x.png" width="58" /> <icon height="87" src="resources/ios/icon/icon-small@3x.png" width="87" /> <icon height="1024" src="resources/ios/icon/icon-1024.png" width="1024" /> <splash height="1136" src="resources/ios/splash/Default-568h@2x~iphone.png" width="640" /> <splash height="1334" src="resources/ios/splash/Default-667h.png" width="750" /> <splash height="2208" src="resources/ios/splash/Default-736h.png" width="1242" /> <splash height="1242" src="resources/ios/splash/Default-Landscape-736h.png" width="2208" /> <splash height="1536" src="resources/ios/splash/Default-Landscape@2x~ipad.png" width="2048" /> <splash height="2048" src="resources/ios/splash/Default-Landscape@~ipadpro.png" width="2732" /> <splash height="768" src="resources/ios/splash/Default-Landscape~ipad.png" width="1024" /> <splash height="2048" src="resources/ios/splash/Default-Portrait@2x~ipad.png" width="1536" /> <splash height="2732" src="resources/ios/splash/Default-Portrait@~ipadpro.png" width="2048" /> <splash height="1024" src="resources/ios/splash/Default-Portrait~ipad.png" width="768" /> <splash height="960" src="resources/ios/splash/Default@2x~iphone.png" width="640" /> <splash height="480" src="resources/ios/splash/Default~iphone.png" width="320" /> <splash height="2732" src="resources/ios/splash/Default@2x~universal~anyany.png" width="2732" /> </platform> <plugin name="cordova-plugin-settings-hook" spec="~0" /> <plugin name="cordova-plugin-whitelist" spec="1.3.3" /> <plugin name="cordova-plugin-device" spec="2.0.2" /> <plugin name="cordova-plugin-splashscreen" spec="5.0.2" /> <plugin name="cordova-plugin-ionic-webview" spec="1.1.19" /> <plugin name="cordova-plugin-ionic-keyboard" spec="2.0.5" /> </widget>
then i use "ionic build --prod --aot ",but i still have this problem

[zhangtingwz]

i have done this problem , i write <ion-content > <div class="loginbg"> <img src="../../assets/imgs/logintitle.png"> <p>微公益系统</p> <form [formGroup]="profileForm" (ngSubmit)="onSubmit()"> <div class="form-group"> <input type="text" class="form-control" name="UserName" id="UserName" required formControlName="UserName" placeholder="请输入账号"> </div> <div class="form-group"> <input type="password" class="form-control" required formControlName="PassWord" placeholder="请输入密码"> </div> <input type="submit" class="btn btn-success" > </form> </div> </ion-content>
set bg in the ion-cotent, before this in the .loginbg,ion-content{ background-image: url("../../assets/imgs/bg.jpg"); background-size: 100% auto; background-repeat: no-repeat; }

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.