How to prevent textarea from dancing while typing and running into page bottom? : JQuery/CSS

Question

I am continuously typing into auto sizing textarea;

When text goes runs into bottom of page and i continue typing;

What i find is that the page dancing like hell on each keypress or keyup and text runs into bottom of page (for which i need to scroll down to check what is happening). How to prevent page dancing and text running into bottom?

JS Fiddle: https://jsfiddle.net/osbnnbxa/

Browser: IE10 (Also find little dancing in firefox; but client use IE10 so need to work on that only)

HTML:

<div>
 <div>
  <br><br> &nbsp;&nbsp;
    <textarea class="normal" name="myarea" id="myarea" style="height: 100px; overflow-y: hidden;"></textarea>
  </div>
</div> 
<input type="button" class="butt" value="ehehehhe" />

JQuery:

var myquery = {
  autoHeight: function(e) {
  $(e).css({
  'height': 'auto',
  'overflow-y': 'hidden'
 }).height(e.scrollHeight);
},
init: function() {
setTimeout(function() {
  $('textarea').each(function() {
    myquery.autoHeight(this);
  }).on('input', function() {
    myquery.autoHeight(this);
  });
}, 200);
$("textarea").keypress(function(e) {
   $(".butt").focus();    
   $(this).focus();    
});
  }

};

$(myquery.init);

Update: Customer says do not define maximum height of textarea. Let it flow as the text increases.

Answer 1

Okay, I know you said to let the textarea flow, but I really like this solution. In your fiddle, it lets the textarea grow to close to the bottom of the viewport and stops all the dancing. It's hopefully a reasonable compromise. Modified fiddle is here.

textarea {
  max-height: 85vh;
}