Space made for two keyboards in Ionic on iOS

So I've got a tab bar and an input in the footer of my view in Ionic as seen in the image below:

But when I click into the input field at the bottom, space seems to be made for two keyboards as seen below:

I can scroll in the space below the input field to bring it back down to where it should be, but I don't know how to get it there in the first place.

Here's the code for the tabs and the view:

    <ion-tabs class="tabs-icon-top">
        <ion-tab title="Tab 1" icon="ion-ionic">
            <ion-nav-view name="tab-one">
                <ion-content>
                    <h1>Header 1</h1>
                    <h2>Header 2</h2>
                    <h3>Header 3</h3>
                </ion-content>
                <ion-footer-bar keyboard-attach class="bar-stable item-input-inset">
                    <label class="item-input-wrapper">
                        <input type="text" placeholder="Type your message">
                    </label>
                    <button class="button button-clear">Send</button>
                </ion-footer-bar>
            </ion-nav-view>
        </ion-tab>
        <ion-tab title="Tab 2" icon="ion-ionic">
            <ion-nav-view name="tab-two">
                2
            </ion-nav-view>
        </ion-tab>
        <ion-tab title="Tab 3" icon="ion-ionic">
            <ion-nav-view name="tab-three">
                3
            </ion-nav-view>
        </ion-tab>
    </ion-tabs>

I've tried it without using keyboard-attach which worked, but it pushes all content in the top half of the screen (including a nav bar if there is one) off the screen which I don't want to happen.

So basically I want the input field to sit right above the keyboard when selected and the content not to be pushed off the top of the page.

Any help is greatly appreciated!

Ionic Version: 1.3.20

Cordova version: 4.3.0

Xcode version: 6.3