RC1 inconsistent Keyboard behavior & padding on iOS


#1

Hello everyone,

I’m currently migrating my ionic 1 app to ionic 2 and already have some troubles on the first page i.e. login page.
Our login page is using a flex div to distribute the element over the height of the device screen. Here is a screenshot with border around each block (ion-row then a form then another ion-row

my app_component.ts file (initialization of the app) contains the following constructor to setup the keyboard plugin, as I used to in ionic 1

constructor(platform: Platform) {
    platform.ready().then(() => {
    // Okay, so the platform is ready and our plugins are available.
    // Here you can do any higher level native things you might need.
    //StatusBar.styleDefault();
    StatusBar.styleBlackTranslucent();
    Splashscreen.hide();
    // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
    // for form inputs)
    Keyboard.hideKeyboardAccessoryBar(false);
    // Don't remove this line unless you know what you are doing. It stops the viewport
    // from snapping when text inputs are focused. Ionic handles this internally for
    // a much nicer keyboard experience.
    Keyboard.disableScroll(true);
});

Problems occur when trying to fill in the required input.
On the 1st click inside an input, the keyboard is shown but no padding at all is added to the scroll-content, as you can see in the following screenshots

the problem is that if the user clicks on the password input first, the keyboard overlaps the input (same problem occurs when the user tap next on the keyboard after he has filled in the nickname field).

Second problem occurs if the user exits the input field (closing the keyboard) and re-enter an input field. in this case, a huge padding is added to the bottom of scroll-content area. I believe this padding is added to compensate for the soft keyboard height but it is around two times larger than the keyboard height which leads to weird scrolling behavior and reshaping of the flex components.

This has been posted multiple times, with some kind of solutions for the different beta version of ionic 2 but I can’t find anything working for the current RC1.

The expected behaviour should be, I guess, 1) to add a padding of the height of the keyboard + what is required for the input field to be “near” the keyboard, if required, 2) consistency between different opening of the keyboard.

Is it required to specify options for the keyboard in every page that is using the keyboard (I tried without success for now) or the app_component level options should be sufficient?

Any help would be greatly appreciated! Thanks

EDIT: let me add that this has been tested on simulator and real devices (iPad 2, iPhone 5 & iPhone 6) with the same observed result!


#2

I was going to tell you to use “-webkit-overflow-scrolling: auto;” but I just removed it in my project because it seems that now it works better without.

Have you try removing your css to have a look at the result? Could you reproduce the same behavior without your styles?

In my case, when I migrated from Beta to RC, some (not that much) of my styles weren’t use anymore or one or two times I had to define special css style just for iOS (stuffs like ion-searchbar.searchbar-ios)…well then just for saying that maybe have a look there first

Just an idea…


#3

Hello,
I observed this issue on two different projects, so I believe that this can not be the reason.
Anyway, to be sure, I checked your idea, removing all styles for the login page: the issue is still there…
As you can see, a 434px height padding is added to the bottom of the scroll-content on iPhone 5 (simulator here, same result on real device) which has a keyboard of around 216px.

Thank for you idea anyway, still looking for a solution.


#4

sorry to hear that. then I’ve got no clue.

Just saw these two posts, maybe u will find something there?


#5

Yes, totally saw those two posts but the 1st one started a long time ago (ionic 2 beta 2 I guess) and the information within are not valid for the current RC1 version of the framework. Though the problem seems to be very related.

Second one is on another topic I believe.

Would be great if we could get some answers from the ionic team :slight_smile:


#6

Sorry to hear these didn’t help too.

Maybe at this point make sens to open a bug/feature request in the GitHub Ionic project?


#7

I should also mention that, the bottom padding is removed AFTER the keyboard is closed, rather than during the closing. this leads to a bad looking scrolling which is an additional problem. An app should be good looking nowadays :stuck_out_tongue:

If I don’t get any response here, i’ll open a bug request on GitHub, indeed .


#8

This is a flex issue. I mean I think the keyboard is meant to calculate the exact padding but this messes with the flex strategy. It is also happening to me… Im looking on how to solve it.

If i change the display: flex to display: block, the padding is added correctly.