问题
Video of the problem from a different user but its the same
http://imgur.com/ca2cNZv
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" />
</intent-filter>
</activity>
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": [
"cordova-plugin-device",
"cordova-plugin-console",
"cordova-plugin-whitelist",
"cordova-plugin-splashscreen",
"cordova-plugin-statusbar",
"cordova-plugin-geolocation",
"cordova-plugin-network-information",
"ionic-plugin-keyboard"
],
"cordovaPlatforms": [
"android",
"ios"
]
In my web view I use ion-view and ion-content
<ion-view>
<ion-content class="has-header has-tabs">
回答1:
In AndroidManifest.xml file try to set windowSoftInputMode
attribute to adjustNothing:
android:windowSoftInputMode="adjustNothing"
It worked for my Ionic project, avoiding the resize of Cordova webview when soft keyboard is on.
回答2:
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>
回答3:
Put:
<style name="AppTheme" parent="AppBaseTheme">
<item name="android:windowBackground">@drawable/gradient</item>
</style>
In styles.xml source
回答4:
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
回答5:
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"
..
...
</activity>
回答6:
Open your platform -> app ->src ->AndroidManifest.xml
Edit
android:windowSoftInputMode="adjustResize"
To
android:windowSoftInputMode="adjustNothing"
回答7:
Add the following code in your 'App.js'. add
$window.addEventListener('native.keyboardhide', function (event) {
$rootScope.$broadcast('native.keyboardhide', event);
});
when app.run() method call with $window and $rootScope dependency. also, add
if (window.cordova && window.cordova.plugins && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
cordova.plugins.Keyboard.disableScroll(true);
}
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.
来源:https://stackoverflow.com/questions/35201412/android-white-background-when-keyboard-fades-away