White background shown while keyboard transitions


#1

While the keyboard is transitioning up or down, it seems the webview is already resized and the background is white, thus causing the white background to be shown. My HTML body background is black so it looks odd when the white background flashes. Does anyone know how to update the background of the UIView?

Video reproducing the issue in slow motion.

Regular speed:

credit: https://issues.apache.org/jira/browse/CB-3930

Thanks!


#2

Just curious, are you using the regular cordova keyboard plugin or our super awesome Ionic specific keyboard plugin?

Ours is based on the cordova plugin, but optimized for ionic.


#3

Sure I already use the ionic keyboard plugin from https://github.com/driftyco/ionic-plugins-keyboard.

Is this related to this issue from cordova plugin -> https://issues.apache.org/jira/browse/CB-3930.

Thanks for reply.


#4

Hi @prutya,

Have you found a fix yet?
I have the same “disgraceful” issue

Thanks!!


#5

@prutya that cordova issue is related to cordova 2.8, not the current 3.0+ version of cordova that we suggest. Are you using this older version of cordova?

@dbar and @prutya, I can’t reproduce this issue on a sample app.
Pardon the sluggish-ness, my mac-book’s running a bit slow this morning :smile:


#6

@mhartington
In my case it happens on Android when the keyboard hides down.


#7

What version of android? I’ll boot up my emulator and give it a go


#8

Unfortunately I just have a 2.3 device here, but as fas as I remember it also happens on 4.3.


#9

Alright I can give it a shot. 2.3 may be an issue just because of it’s over all performance (also we only partially support it)

I’ll give 4.3 a try. One moment please :smile:


#10

So I got 4.3 to work smoothly, and surprisingly 2.3 to work :smile:

Here’s the example project for reference


#11

The softkeyboard doesn’t hide itself when focus change.
But you can hide it with the hard backbutton.

The background remains white when the keyboard hides down :blush:


#12

Well if it’s for 2.3 then thats the issue. We only have partial support 2.3 and that web view has it’s limitations.

Works find on 4.3


#13

I very appreciate your help, I’m using the Cordova 3.5.0-0.2.4,
I’m also using this plugin in my project : https://github.com/driftyco/ionic-plugins-keyboard

Anyway, my client is OK with the white space on the transition. :smiley:

I didn’t try your example project yet, but if it solve this problem, next project i’ll use it as a base project.

Thanks


#14

Well that project is just a project made with the ionic CLI, so you should use that


#15

I’ve got an issue where, once the keyboard transitions off screen, the area it occupied changes to a white background. I’m guessing it may be the same issue described in this post. What was the resolution to this issue? Was it that we should download and install the ionic keyboard plugin?

Thanks.


#16

It’s always suggested that you use the ionic plugin. So much so that we include it automatically with our CLI projects


#17

Actually my colleague has just told me that he installed the keyboard plugin. I’ve tested again and the problem still exists. Is it worthwhile upgrading to a newer version of ionic?

My current ionic version.json has:
{
“version”: “1.0.0-beta.11”,
“codename”: “indium-iguana”,
“date”: “2014-08-06”,
“time”: “21:49:18”
}


#18

Do you have the project up on github? I can take a look to see whats going on.
If not the project, an example project that has the same issue.

A similar thing was happening to a use who had background colors or images applied to the scrollview, is this the case?


#19

I’m using this config in config.xml file :

<access origin="*" />
<preference name="fullscreen" value="false" />
<preference name="webviewbounce" value="false" />
<preference name="UIWebViewBounce" value="false" />
<preference name="DisallowOverscroll" value="true" />
<preference name="HideKeyboardFormAccessoryBar" value="false"/>
<preference name="KeyboardShrinksView" value="true" />
<preference name="Orientation" value="portrait" />
<preference name="hardwareAccelerated" value="true" />
<preference name="DisableScrollingWhenKeyboardShrinksView" value="true" />
<preference name="EnableViewportScale" value="false" />
<preference name="KeyboardDisplayRequiresUserAction" value="false" />

<preference name="target-device" value="universal" />

<preference name="AndroidLaunchMode" value="singleTask" />

<!-- Don't store local date in an iCloud backup. Turn this to "cloud" to enable storage 
     to be sent to iCloud. Note: enabling this could result in Apple rejecting your app.
-->
<preference name="BackupWebStorage" value="none" /> 

<feature name="Keyboard">
    <param name="ios-package" value="IonicKeyboard" onload="true" />
</feature>

I solving this problem for me. For more information: I’m currently using the com.ionic.keyboard 1.0.2 “Keyboard” plugin.

Hope this help.


#20

@mhartington - thanks!!

You guessed right that the background colour is applied to the scrollview.

If the keyboard (quite rightly) pushes up this scrollview when the keyboard comes into view, it should also push down the scrollview once the keyboard disappears. Does the keyboard plugin address this issue?

Thanks.