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

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

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

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>
                <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 }}

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