自動サイズ変更するtextareaで、長文になると冒頭の文章が上に隠れてしまう
お世話になります。MonacaでAngularjsを用いて開発をしています。
今回、文字数によってテキストエリアのサイズを自動変更するメモ帳を作りたいと考えています。
そこでGithubにあったangular-elasticというスクリプトを参考にプログラムを実装しました。
その結果、WindowsPC上では問題なく期待通りに動きました。
しかしiphone6(ver9.2)で試してみたところ、日本語が含まれている場合にかぎり、長文を入力すればするほど冒頭の文章が上方に隠れてしまうという問題が発生しました。
なお、英語のみの場合は問題なく表示されています。
日本語でも隠れないようにすることが目標です。
アドバイスを頂けますでしょうか。よろしくお願いいたします。
<!DOCTYPE HTML>
<html ng-app="elasticDemo">
<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 src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.min.js"></script>
<script src="elastic.js"></script>
<script>
angular.module('elasticDemo', ['monospaced.elastic'])
.controller('elasticDemoController', ['$scope', function($scope){
'use strict';
$scope.bar = 'Elastic with a CSS transition. Try typing something...';
}])
</script>
<style>
html {
background: #e7f3ff;
color: #1c000e;
text-shadow: 0 1px 0 #fff;
}
body {
margin: 8px auto;
max-width: 90%;
width: 480px;
}
h1 {
margin: 0 0 8px;
font-weight: normal;
font-size: 30px;
}
textarea {
padding: 10px;
width: 300px;
max-width: 90%;
}
.animate:focus {
-webkit-transition: height 50ms ease-in-out;
-moz-transition: height 50ms ease-in-out;
-o-transition: height 50ms ease-in-out;
transition: height 50ms ease-in-out;
}
.msd-elastic {
max-height: 400px;
}
</style>
</head>
<body data-ng-controller="elasticDemoController">
<h1>Angular Elastic</h1>
<textarea class="animate msd-elastic: \n;" data-ng-model="bar"></textarea>
</body>
</html>