title: Why do I get wrong scrollHeight for TEXTAREA on input change in Chrome?
body: <p>I'm trying to write a JavaScript for auto adjusting the text size of a textarea.</p>
  
  <p>my problem is: after the line is filled, the scrollHeight returns wrong value on each second symbol (you can see the log output in the console).</p>
  
  <p>The height of the textarea is 47, I get alternately 62 and 47 (and no resize).</p>
  
  <p>JQuery Plugin:</p>
  
  <pre><code>; (function($) {
  /**
   * Resizes the text in the textarea
   * @version 0.1
   */
  $.fn.textResizer = function(options) {
  
      options = jQuery.extend({
          maxFontSize: null,
          minFontSize: 8,
          step: 1
      }, options);
  
      return this.each(function() {
          var maxHeight = $(this).outerHeight();
          $(this).bind('input propertychange', function() {
  
              var innerElements = $(this).children(':visible');
              console.log($(innerElements));
  
              var fontSize = options.maxFontSize,
                  innerHeight;
  
              console.log('inner: '+$(this).css( "height" )+ ', max: '+maxHeight, 'outer: '+$(this).outerHeight());
              console.log(this.scrollHeight);
              do {
  
                  innerHeight = this.scrollHeight;
                  console.log(this.scrollHeight);
  
                  fontSize = fontSize - options.step;
                  $(this).css('font-size', fontSize);
  
              } while ((innerHeight &gt; maxHeight) &amp;&amp; fontSize &gt; options.minFontSize);
          });
      });
  
  };
  
  })(jQuery);
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>textarea {
      position: absolute;
      width:176px;
      height:47px;
      top: 4px;
      left: 60px;
      background: #666666;
      border: none;
      color: #fff;
      overflow: hidden;
      display:inline-block;
      vertical-align: middle;
      resize: none;
      padding: 0;
    }
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;script&gt;
  $(document).ready(function() {
      $('textarea').textResizer({'maxFontSize':30});
  });
  &lt;/script&gt;
  
  &lt;textarea&gt;&lt;/textarea&gt;
  </code></pre>
  
  <p>Here is my example:
  <a href="http://jsfiddle.net/6nhLmcge/" rel="nofollow">http://jsfiddle.net/6nhLmcge/</a></p>
  
  <p>What can be the reason of this behavior?</p>
  
  <p>Do you know other solutions/plugins for this task?</p>