Textarea and cursor moves off the screen when tapped

Ion-content is scrolled automatically and goes off the screen when I tap on a input.

It is a simple screen with a textarea and a button

Screen Shot 2018-03-02 at 2.33.06 PM.jpg387x651 16.1 KB

Textarea overlaps with the header when it is focused. (see the cursor position in below screenshot)

IMG_0608.png750x1334 46.7 KB

And I see ion-content size changed automatically. (See the scrollbar size)

IMG_0609.png750x1334 46.6 KB

Here is my ion-content

<ion-content class="ion-content-div has-header has-tabs safe-page-padding" has-bouncing="true">
        <div class="card">
            <div class="item item-text-wrap">
                <label class="item item-input">
                    <textarea type="text" ng-model="customNote" textarea rows="10" cols="50"></textarea>
                </label>
                <button ng-disabled="!customNote" ng-click="addNote(customNote)" class="button button-block button-positive button-margin">
                    <i class="icon ion-checkmark-circled normalize-size"></i>{{ 'save_note' | translate }}
                </button>
            </div>
        </div>
    </ion-content>

How to fix this? Ideally the textarea should stay at the top of the screen.

Thanks.