title: Textarea auto resizer resize at every keypress on chrome
body: <p>I'm implementing an auto textarea resizer that auto-expands a textarea when user presses ENTER and after a minimum scrollHeight size.</p>
  
  <p>It works well in IE, Firefox and Opera, but not in Chrome.<br>
  In Chrome the textarea is resized at any keypress (not only ENTER) because when settings e.style.height it also changes scrollHeight (this doesn't happen to occur on other browsers.</p>
  
  <p>I marked the problematic line with a comment:</p>
  
  <pre><code>function resize(e)
  {
      e = e.target || e;
      var $e = $(e);
  
      console.log( 'scrollHeight:'+e.scrollHeight );
      console.log( 'style.height:'+e.style.height );
  
      var h = Math.min( e.scrollHeight, $e.data('textexp-max') );
      h = Math.max( h, $e.data('textexp-min') );
  
      if( $e.data('h')!=h )
      {
          e.style.height = "";
          e.style.height      =  h + "px"; //this changes the scrollHeight even if style.height is smaller thatn scrollHeight
          //e.style.overflow  = (e.scrollHeight &gt; h ? "auto" : "hidden");
          $e.data('h',h);
      }
      return true;
  }
  </code></pre>
  
  <p>Here you'll find full code: <a href="http://jsfiddle.net/NzTYd/9/" rel="nofollow">http://jsfiddle.net/NzTYd/9/</a></p>
  
  <p><strong>UPDATE</strong><br>
  I've found that when I update the <code>e.style.height</code> in Firefox/IE/Opera, <code>e.scrollHeight</code> is updated to the exact same value:<br>
  Example:
  Setting <strong>80px</strong> to <code>e.style.height</code>, sets to <strong>80px</strong> <code>e.scrollHeight</code></p>
  
  <p>However, Chrome updates <code>e.scrollHeight</code> with a higher value (4px more).<br>
  Example::
  Settings <strong>80px</strong> to <code>e.style.height</code>, sets to <strong>84px</strong> <code>e.scrollHeight</code></p>
  
  <p>This causes a textarea that is growing 4px for EVERY keypress it receives!</p>