

お世話になります。MonacaでAngularjsを用いて開発をしています。  
今回、文字数によってテキストエリアのサイズを自動変更するメモ帳を作りたいと考えています。  
そこでGithubにあった[angular-elastic](https://github.com/monospaced/angular-
elastic)というスクリプトを参考にプログラムを実装しました。

その結果、WindowsPC上では問題なく期待通りに動きました。  
しかしiphone6(ver9.2)で試してみたところ、日本語が含まれている場合にかぎり、長文を入力すればするほど冒頭の文章が上方に隠れてしまうという問題が発生しました。  
なお、英語のみの場合は問題なく表示されています。

日本語でも隠れないようにすることが目標です。  
アドバイスを頂けますでしょうか。よろしくお願いいたします。

[![画像の説明をここに入力](https://i.stack.imgur.com/ssxe8.png)](https://i.stack.imgur.com/ssxe8.png)

[code]

    <!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>
    
[/code]


CC BY-SA 3.0
2016-04-15T14:25:36.200
24059
2016-04-16T17:16:43.273
14390
question
ios monaca html angularjs
自動サイズ変更するtextareaで、長文になると冒頭の文章が上に隠れてしまう


自己解決しました。CSSでtextareaの行間を指定したら、冒頭の文章が隠れることなく表示されました。

[code]

    textarea{
      line-height: 1em;
    }
    
[/code]


CC BY-SA 3.0
2016-04-16T17:16:43.273
24072
2016-04-16T17:16:43.273
14390
24059
answer