Footer moves up when i write

I have a simple application consists of a textbox and a footer, the problem i faced that when i write in the textbox , the footer moves up like this

here is the code

 <body ng-app="starter">
  <style>
      .pane {background:#EEE}
  </style>
<ion-pane>
  <ion-header-bar class="bar-stable">
    <h1 class="title">Header</h1>
  </ion-header-bar>
    <ion-content has-footer>
        <input type="text" />

    </ion-content>
    <ion-footer-bar class="bar-stable">
        <h1 class="title">Footer</h1>
    </ion-footer-bar>


</ion-pane>