title: Scroll Height increases when I type in text area
body: <p>I have a text area that I am resizing automatically if needed. I have it working but i see a small issue that I dont understand.</p>
  
  <p>When on my element I call on keyup. In there I set the scroll height to be whatever the text area is. So when a user hits enter it will grow. My issue is that the first time when a user enters the text area and start typing the box extends a small bit. But I dont understand how the scroll height could have changed. Can anyone explain to me why that is happening? If you run the code you will see the text jumping each time you hit enter, dont worry about that. Cheers
  Below is my code:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  
  &lt;html&gt;
  &lt;head&gt;
  &lt;title&gt;Page Title&lt;/title&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p></p>
  
  <p></p>
  
  <pre><code>/* The Modal (background) */
  .modal {
      display: none; /* Hidden by default */
      position: fixed; /* Stay in place */
      z-index: 1; /* Sit on top */
  }
  
  .Conor{
  min-height: 20px; /* for default height */
      overflow: hidden;
      resize: none;
      padding: 4px;
      font-size: 14px;
      border: 1px solid #000;
  </code></pre>
  
  <p>}</p>
  
  <p></p>
  
  <pre><code>&lt;body&gt;
  
  &lt;div class='containter' &gt;
  &lt;div&gt;
      fghfghg
  &lt;/div&gt;
  &lt;textarea class='textArea' rows = 2 style='width: 60%'&gt;
  
  &lt;/textarea&gt;
  &lt;div id="myModal" class="modal"&gt;
  
    &lt;!-- Modal content --&gt;
      &lt;div class="modal-content"&gt;          
        &lt;textarea class='taClass' rows = 2 style='width: 100%'&gt;&lt;/textarea&gt;
      &lt;/div&gt;
  
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;div&gt;
  &lt;textarea&gt; this is a test&lt;/textarea&gt;
  &lt;/div&gt;
  </code></pre>
  
  
  
  <p>
  </p>
  
  <p>My javascript:</p>
  
  <pre><code>$('.textArea').trigger('click');
  var position = null;
  $('.containter').on('click', '.textArea', function(){
             console.log($(this).position());
              console.log($(this).parent().attr('class'));
              position = $(this).position();
              var modal = document.getElementById('myModal');
              $('.modal').css({top: position.top, left: position.left, width: $(this).width(), height: $(this).height()});
              $('.modal').show();
              $('.taClass').height(this.scrollHeight);
              $('.taClass').focus();
      });
  
  $('.taClass').on('keyup',function(e){
      $(this).css('height','auto');
      $(this).height(this.scrollHeight);
  });
  
  $(document).click(function(event){
          if (event.target.className != 'textArea' &amp;&amp; event.target.className != 'taClass') {
              $('.modal').hide();
          }
  });
  </code></pre>