iosにてtextareaにフォーカスが入るとキーボードによってヘッダーが上にずれて見えなくなる
初心者です。お世話になります。開発環境Monacaです。AngularJsの勉強を兼ねてOnsenUiコンポーネントを用いつつ、入力した文字数がヘッダーに表示される簡単なメモ帳を作成しました（入力画面のみ）。
しかしiphone(ios9.2)で確認したところ、textareaにフォーカスが入ると、表示されたキーボードによってヘッダー部分が上方にずれてしまいます。
テキスト入力中でもヘッダーが常時見えている状態にしたいのですが、どうしたらよいでしょうか。なお下記リンクの内容に従いCSSを設定してみましたが、実現できませんでした。
【iOS8でposition:fixedなheaderに付けたinputにフォーカスを当てると一番上までスクロールしてしまう】
http://urx3.nu/s41T
アドバイスを頂ければ幸いです。
`
<!DOCTYPE HTML>
<html ng-csp>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta http-equiv="Content-Security-Policy" content="default-src * data:; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
<script src="components/loader.js"></script>
<script src="js/winstore-jscompat.js"></script>
<link rel="stylesshet" href="components/monaca-onsenui/js/angular/angular-csp.css">
<link rel="stylesheet" href="components/loader.css">
<link rel="stylesheet" href="css/style.css">
<script>
ons.bootstrap();
</script>
</head>
<body>
<ons-navigator var="myNavigator" page="page1.html">
</ons-navigator>
<ons-template id = "page1.html">
<ons-page>
<ons-toolbar>
<div class="center">メモ帳</div>
</ons-toolbar>
<div>文字数:<span ng-bind="inputting.length"></span></div>
<section class="scroll">
<div class="contents" >
<textarea class="textarea--transparent" ng-model="inputting" placeholder="Textarea"></textarea>
</div>
</section>
</ons-page>
</ons-template>
<style>
.contents{
width: 100%;
height: 100%;
position: fixed;
}
.textarea--transparent{
width: 100%;
height: 100%;
}
.scroll {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
padding-top: 40px;
overflow-y: scroll;
}
</style>
</body>
</html>
`
