Keyboard Overlaps Input on iOS/Makes div disappear

[nicholasalanbrown]

Hello:

I know Ionic is a bit fraught with keyboard challenges across platforms. Most of the issues I've read about related to Android, but I'm having an issue with iOS. When I tap into the input field, instead of scrolling up to show it, the keyboard overlaps the input entirely.

As you can see, it also make the div above disappear until I tap it.

Any guidance would be much appreciated.

[nicholasalanbrown]

For a little more context, here's what I have in my client-side settings:

Meteor.startup(function() {
    if (Meteor.isCordova) {
        /*cordova.plugins.Keyboard.disableScroll(true);*/
        cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
        document.addEventListener("deviceready", function() {
            StatusBar.overlaysWebView(true);
            StatusBar.styleLightContent();
        }, false);
    }
});

I've also tried it with uncommenting the disable native scrolling setting as suggested in some of the Ionic forums to no avail

And here is my template code:

<template name="practice">
    {{#contentFor "headerTitle"}}
        <div class="level-coin text-center h-center">
            <h3>{{currentLevel}}</h3>
        </div>
    {{/contentFor}}
    {{#contentFor "headerButtonLeft"}}
        <div class="save-exit v-center">
            {{>ionNavBackButton}}</div>
    {{/contentFor}}
    {{#contentFor "headerButtonRight"}}
        <div class="button button-clear pull-right v-center">
            <h3 class="level-progress">{{xp}} / {{levelMax}} FP</h3></div>
    {{/contentFor}}
    {{#ionView}}
        <div class="blue-stripes">
            {{#ionContent}}
                <div class="padding">
                    <progress max="{{levelMax}}" value="{{levelProgress}}" data-levelRemaining="{{levelRemaining}}"> </progress>
                    <div class="card-container col text-center">
                        {{#momentum plugin='card-to-right' }}
                            {{#each cards}}
                                <div class="card  {{#if isFirst}}card-active{{else}}card-next{{/if}}">
                                    <div class="flipper">
                                        <div class="front">
                                            <h2>{{prefixForeign}}</h2>
                                            <h2>{{foreign}}</h2>
                                            <audio id="pronounce{{number}}" src="/audio/{{language}}/{{number}}.mp3" type="audio/mpeg"></audio>
                                            <!--<i data-foreign="{{number}}" class="fa fa-volume-up fa-2x"></i>-->
                                            {{> ionIcon icon='volume-medium'}}
                                        </div>
                                        <div class="back">
                                            <h2>{{prefixEnglish}}</h2>
                                            <h2>{{english}}</h2>
                                            {{#momentum plugin='fade-score' }}
                                                {{#if correct}}
                                                    {{> ionIcon icon='checkmark-circled' class="score-icon correct"}}
                                                {{/if}}
                                                {{#if incorrect}}
                                                    {{> ionIcon icon='close-circled' class="score-icon incorrect"}}
                                                {{/if}}
                                            {{/momentum}}
                                        </div>
                                    </div>
                                </div>
                            {{/each}}
                        {{/momentum}}
                    </div>
                </div>
                <div class="padding-2x">
                    <form>
                        <div class="list">
                            <label class="item item-input translate-input">
                                <input type="text" placeholder="Type a translation..." id="answer" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false">
                            </label>
                        </div>
                    </form>
                </div>
            {{/ionContent}}
        </div>
    {{/ionView}}
</template>

[nicholasalanbrown]

Digging further, it turns out that when I tap into the input, the keyboard comes up but the focus doesn't actually go the input field. Then I drag and scroll up, and need to tap into the field a second time to get focus. Then when I text, the div above magically reappears.

I'm testing on the Simulator right now but will experiment with a physical device soon to see if it's an issue there as well.

I'm not completely clear on how you've integrated Ionic - when they make bug fixes and updates, to you need to rework your package to match?

[nicholasalanbrown]

I think I figured it out - I was using -webkit-backface-visibility: hidden to enable a card flip animation but apparently it's a bit buggy on iOS. I'm not sure if these issues are more prevalent in Ionic but I see lots of older issues with -webkit-backface-visibility and flickering animations related to the keyboard on iOS.